上一篇文章我們學(xué)習(xí)了<list>址遇、<cell>熄阻、<loading>和<refresh>組件，這都都是在項(xiàng)目中常用的倔约。那這篇文章我們一起來(lái)學(xué)習(xí)<recycle-list>秃殉、<scroller>、<slider>浸剩、<indicator>钾军、<textarea>和<input>，大家可能會(huì)問(wèn)為什么Weex的組件為什么要一個(gè)一個(gè)學(xué)下來(lái)呢绢要？其實(shí)這是一個(gè)很普遍的問(wèn)題吏恭，任何技術(shù)不打好基礎(chǔ)，以后實(shí)際運(yùn)用的時(shí)候是要買單的重罪，還是那句話砸泛，基礎(chǔ)不牢，地動(dòng)山搖蛆封。

那么我們首先來(lái)看一下<recycle-list>組件唇礁，這個(gè)組件是不是和我們Android中的RecycleView很像，其實(shí)他的功能就是一樣的惨篱。

1.<recycle-list>的簡(jiǎn)介和使用

<recycle-list> 是一個(gè)新的列表容器盏筐，具有回收和復(fù)用的能力，可以大幅優(yōu)化內(nèi)存占用和渲染性能砸讳。它只能使用 <cell-slot> 作為其直接子節(jié)點(diǎn)琢融，使用其他節(jié)點(diǎn)無(wú)效。

<cell-slot> 代表的是列表每一項(xiàng)的模板簿寂，它只用來(lái)描述模板的結(jié)構(gòu)漾抬，并不對(duì)應(yīng)實(shí)際的節(jié)點(diǎn)。<cell-slot> 的個(gè)數(shù)只表示模板的種類數(shù)常遂，真實(shí)列表項(xiàng)的個(gè)數(shù)是由數(shù)據(jù)決定的纳令。

<recycle-list>的屬性如下：

• for在 <recycle-list> 添加 for 屬性即可描述如何循環(huán)展開列表的數(shù)據(jù)，語(yǔ)法和 Vue 的 v-for 指令類似米同，但是它循環(huán)的是自己內(nèi)部的子節(jié)點(diǎn)骇扇，并不是當(dāng)前節(jié)點(diǎn)。寫法：
  • alias in expression
  • (alias, index) in expression
• switch在 <recycle-list> 添加 switch 屬性可以用來(lái)指定數(shù)據(jù)中用于區(qū)分子模板類型的字段名面粮，語(yǔ)義和編程語(yǔ)言里的 switch 一致少孝，配合 <cell-slot> 中的 case 和 default 屬性一起使用。
  如果省略了 switch 屬性熬苍，則只會(huì)將第一個(gè) <cell-slot> 視為模板稍走，多余的模板將會(huì)被忽略。

簡(jiǎn)單的使用示例如下：

<recycle-list for="(item, i) in longList" switch="type">
  <cell-slot case="A">
    <text>- A {{i}} -</text>
  </cell-slot>
  <cell-slot case="B">
    <text>- B {{i}} -</text>
  </cell-slot>
</recycle-list>

在 <recycle-list> 中使用的子組件也將被視為模板柴底，在開發(fā)組件時(shí)給 <template> 標(biāo)簽添加 recyclable 屬性婿脸，才可以用在 <recycle-list> 中。

<template recyclable>
  <div>
    <text>...</text>
  </div>
</template>
<script>
  // ...
</script>

特別說(shuō)明的是：添加了 recyclable 屬性并不會(huì)影響組件本身的功能柄驻，它仍然可以用在其他正常的組件里狐树。

使用<recycle-list>需要注意以下幾點(diǎn)：

1. 屬性和文本的綁定

綁定屬性或者文本時(shí)，僅支持表達(dá)式鸿脓，不支持函數(shù)調(diào)用抑钟，也不支持使用 filter，可以參考 Implementation.md#支持的表達(dá)式野哭，例如在塔，下列寫法不可用：

<div :prop="capitalize(card.title)">
  <text>{{ card.title | capitalize }}</text>
</div>

針對(duì)這種場(chǎng)景，推薦使用 computed屬性來(lái)實(shí)現(xiàn)拨黔。因?yàn)槟０宓娜≈凳怯煽蛻舳藢?shí)現(xiàn)的蛔溃，而函數(shù)的定義在前端（filter 可以認(rèn)為是在模板里調(diào)用函數(shù)的語(yǔ)法糖），如果每次取值都走一次通信的話，會(huì)大幅降低渲染性能

<slot>不可用<cell-slot> 的功能和 <slot> 有部分重疊，而且更為激進(jìn)，在概念上有沖突镇眷，存在很多邊界情況無(wú)法完全支持鸥昏。不要在 <cell-slot> 及其子組件里使用 <slot>

2. v-once 不會(huì)優(yōu)化渲染性能

和前端框架中的理解不同，客戶端里要實(shí)現(xiàn)復(fù)用的邏輯俊庇，會(huì)標(biāo)記模板節(jié)點(diǎn)的狀態(tài)，添加了 v-once 能保證節(jié)點(diǎn)只渲染一次，但是并不一定能優(yōu)化渲染性能甜刻，反而可能會(huì)拖慢客戶端復(fù)用節(jié)點(diǎn)時(shí)的比對(duì)效率。

3. 樣式功能的限制

目前版本里還不支持綁定樣式類名（v-bind:class）正勒，后續(xù)會(huì)支持的

4. 子組件的限制

• 沒(méi)有 Virtual DOM得院！ 使用在 <recycle-list> 中的組件沒(méi)有 Virtual DOM！與 Virtual DOM 相關(guān)的功能也不支持章贞。在開發(fā)過(guò)程中盡量只處理數(shù)據(jù)祥绞，不要操作生成后的節(jié)點(diǎn)。

  下列這些屬性都不再有意義鸭限，請(qǐng)不要使用：

  vm.$refs 里的值可能是數(shù)組蜕径、子組件的實(shí)例、DOM 元素败京，在前端里比較常用兜喻，如果不支持，對(duì) Weex 里的 dom 模塊和 animation 模塊的功能也有影響赡麦。

  目前正在討論技術(shù)方案朴皆，部分接口可能會(huì)重新設(shè)計(jì)，或者是在 vm 上透出專為 <recycle-list> 設(shè)計(jì)的接口泛粹。

  • vm.$el
  • vm.$refs.xxx
  • vm.$vnode
  • vm.#slots
  • vm.#scopedSlots

• 組件的屬性 目前子組件的屬性不支持函數(shù)遂铡。（正在討論實(shí)現(xiàn)方案）

  <sub-component :prop="item.xxx" />
  
  

  因?yàn)樽咏M件的屬性值需要在前端和客戶端之間傳遞，所以僅支持可序列化的值晶姊。item.xxx 的類型可以是對(duì)象忧便、數(shù)組、字符串帽借、數(shù)字珠增、布爾值等，不支持函數(shù)砍艾。

• 生命周期的行為差異 由于列表的渲染存在回收機(jī)制蒂教，節(jié)點(diǎn)渲染與否也與用戶的滾動(dòng)行為有關(guān)，組件的生命周期行為會(huì)有一些不一致脆荷。

  可回收長(zhǎng)列表不會(huì)立即渲染所有節(jié)點(diǎn)凝垛，只有即將滾動(dòng)到可視區(qū)域（以及可滾動(dòng)的安全區(qū)域）內(nèi)時(shí)才開始渲染懊悯，組件生命周期的語(yǔ)義沒(méi)變，但是會(huì)延遲觸發(fā)梦皮。

  假設(shè)有 100 條數(shù)據(jù)炭分，一條數(shù)據(jù)了對(duì)應(yīng)一個(gè)組件。渲染首屏?xí)r只能展示 8 條數(shù)據(jù)的節(jié)點(diǎn)剑肯，那就只有前 8 個(gè)組件被創(chuàng)建了捧毛，也只有前 8 個(gè)組件的生命周期被觸發(fā)。

  • 組件的 beforeCreate 和 created 也只有在組件即將創(chuàng)建和創(chuàng)建完成時(shí)才會(huì)觸發(fā)
  • 同理让网，組件的 beforeMount 和 mounted 也只有頁(yè)面真正渲染到了該組件呀忧，在即將掛載和已經(jīng)掛載時(shí)才會(huì)觸發(fā)

• 組件的自定義事件
  計(jì)劃支持。vm.$on, vm.$once, vm.$emit, vm.$off 等功能還未完全調(diào)通溃睹，接口可用而账，但是行為可能有些差異（參數(shù)丟失），暫時(shí)不要使用因篇。

使用示例如下：

<recycle-list for="(item, i) in longList" switch="type">
  <cell-slot case="A">
    <text>- A {{i}} -</text>
  </cell-slot>
  <cell-slot case="B">
    <text>- B {{i}} -</text>
  </cell-slot>
</recycle-list>

如果有如下數(shù)據(jù)：

const longList = [
  { type: 'A' },
  { type: 'B' },
  { type: 'B' },
  { type: 'A' },
  { type: 'B' }
]

則會(huì)生成如下等價(jià)節(jié)點(diǎn)：

<text>- A 0 -</text>
<text>- B 1 -</text>
<text>- B 2 -</text>
<text>- A 3 -</text>
<text>- B 4 -</text>

如果將模板合并成一個(gè)泞辐，也可以省略 switch 和 case，將例子進(jìn)一步簡(jiǎn)化：

<recycle-list for="(item, i) in longList">
  <cell-slot>
    <text>- {{item.type}} {{i}} -</text>
  </cell-slot>
</recycle-list>

2.<scroller>的簡(jiǎn)介和使用

<scroller> 是一個(gè)容納子組件進(jìn)行橫向或豎向滾動(dòng)的容器組件竞滓。如果你的組件需要進(jìn)行滾動(dòng)咐吼，可以將 <scroller> 當(dāng)作根元素或者父元素使用，否則頁(yè)面無(wú)法滾動(dòng)（ <list> 組件除外虽界， <list> 默認(rèn)可以滾動(dòng)）汽烦。

有幾點(diǎn)需要開發(fā)者特別的注意：

• 不允許相同方向的 <list> 或者 <scroller> 互相嵌套涛菠，換句話說(shuō)就是嵌套的 <list> / <scroller> 必須是不同的方向莉御。
• <scroller> 需要顯式的設(shè)置其寬高，可使用 position: absolute; 定位或 width俗冻、height 設(shè)置其寬高值礁叔。

<template>
  <scroller class="scroller">
    <div class="row" v-for="row in rows" :key="row.id">
      <text class="text">{{row.name}}</text>
    </div>
  </scroller>
</template>

<script>
  const dom = weex.requireModule('dom')

  export default {
    data () {
      return {
        rows: []
      }
    },
    created () {
      for (let i = 0; i < 80; i++) {
        this.rows.push({id: i, name: 'row ' + i})
      }
    },
  }
</script>

<scroller> 支持任意類型的 Weex 組件作為其子組件。 其中迄薄，還支持以下兩個(gè)特殊組件作為子組件：

• <refresh>: 用于添加下拉刷新的功能琅关。詳情請(qǐng)查看<refersh>。
• <loading>: 用于添加上拉加載更多的功能讥蔽。詳情請(qǐng)查看<loading>涣易。

<scroller>的屬性

特別提醒：

scroll-direction 定義了 scroller 的滾動(dòng)方向隆嗅，樣式表屬性 flex-direction 定義了 scroller 的布局方向界阁，兩個(gè)方向必須一致。例如：

• scroll-direction 的默認(rèn)值是 vertical胖喳，flex-direction 的默認(rèn)值是 column泡躯；
• 當(dāng)需要一個(gè)水平方向的 scroller 時(shí)，使用 scroll-direction="horizontal" 和 flex-direction: row;
• 當(dāng)需要一個(gè)豎直方向的 scroller 時(shí)禀晓，使用 scroll-direction="vertical" 和 flex-direction: column精续，由于這兩個(gè)值均是默認(rèn)值，當(dāng)需要一個(gè)豎直方向的 scroller 時(shí)粹懒，這兩個(gè)值可以不設(shè)置重付。

<scroller>有如下四個(gè)屬性：

• loadmore：如果滾動(dòng)到底部將會(huì)立即觸發(fā)這個(gè)事件，你可以在這個(gè)事件的處理函數(shù)中加載下一頁(yè)的列表項(xiàng)凫乖，可通過(guò) loadmoreoffset 屬性設(shè)置觸發(fā)偏移距離确垫。

• scroll：列表發(fā)生滾動(dòng)時(shí)將會(huì)觸發(fā)該事件，事件的默認(rèn)觸發(fā)頻率為 10px帽芽，即列表每滾動(dòng) 10px 觸發(fā)一次删掀，可通過(guò)屬性 offset-accuracy 設(shè)置抽樣率。事件中 Event 對(duì)象有以下屬性:

  屬性	說(shuō)明	類型
  contentSize	列表的內(nèi)容尺寸	Object
  width	列表內(nèi)容寬度	number
  height	列表內(nèi)容高度	number
  contentOffset	列表的偏移尺寸	Object
  x	x 軸上的偏移量	number
  y	y 軸上的偏移量	number

• scrollstart：其中H5 暫不支持該事件导街，當(dāng)列表開始滾動(dòng)時(shí)觸發(fā)披泪，當(dāng)前的內(nèi)容高度和列表偏移會(huì)在 callback 中返回。

• scrollend：其中H5 暫不支持該事件搬瑰，與 scrollstar 類似款票，當(dāng)列表結(jié)束滾動(dòng)時(shí)觸發(fā)，當(dāng)前的內(nèi)容高度和列表偏移會(huì)在 callback 中返回泽论。

3.<slider>的簡(jiǎn)介和使用

Slider 組件用于在一個(gè)頁(yè)面中展示多個(gè)圖片艾少，在前端這種效果被稱為輪播圖。默認(rèn)的輪播間隔為3秒翼悴。它支持任意類型的 Weex 組件作為其子組件缚够。你也可以放置一個(gè) indicator 組件用于顯示輪播指示器。indicator 也只能作為 Slider 的子組件使用鹦赎。indicator 不能再包含其它子組件了谍椅。

<slider>的屬性有如下幾種：

• auto-play, boolean. 組件渲染完成時(shí)，是否自動(dòng)開始播放古话，默認(rèn)為 false.
• interval, number（ms）. 輪播間隔雏吭，默認(rèn)為 3000ms。
• index, number. 設(shè)置顯示slider的第幾個(gè)頁(yè)面煞额。
• offset-x-accuracy, number. 控制 onscroll 事件觸發(fā)的頻率思恐，默認(rèn)值為10沾谜，表示兩次 onscroll 事件之間滾動(dòng)容器至少滾動(dòng)了10px。將該值設(shè)置為較小的數(shù)值會(huì)提高滾動(dòng)事件采樣的精度胀莹，但同時(shí)也會(huì)降低頁(yè)面的性能基跑。
• show-indicators, boolean. 是否顯示指示器。
• infinite, boolean. 設(shè)置是否可以無(wú)限輪播描焰，默認(rèn)為 true媳否。
• scrollable, boolean. 設(shè)置是否可以通過(guò)滑動(dòng)手勢(shì)來(lái)切換頁(yè)面，默認(rèn)為 true荆秦。
• keep-index, boolean, Android. 設(shè)置輪播器中的數(shù)據(jù)發(fā)生變化后是否保持變化前的頁(yè)面序號(hào)篱竭。
• forbid-slide-animation, boolean, v0.20+ & iOS. iOS 平臺(tái)默認(rèn)支持動(dòng)畫，使用該屬性可以強(qiáng)制關(guān)閉切換時(shí)的動(dòng)畫步绸。

簡(jiǎn)單的使用示例如下所示：

<template>
  <div>
    <slider class="slider" interval="3000" auto-play="true">
      <div class="frame" v-for="img in imageList">
        <image class="image" resize="cover" :src="img.src"></image>
      </div>
    </slider>
  </div>
</template>

<style scoped>
  .image {
    width: 700px;
    height: 700px;
  }
  .slider {
    margin-top: 25px;
    margin-left: 25px;
    width: 700px;
    height: 700px;
    border-width: 2px;
    border-style: solid;
    border-color: #41B883;
  }
  .frame {
    width: 700px;
    height: 700px;
    position: relative;
  }
</style>

<script>
  export default {
    data () {
      return {
        imageList: [
          { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
          { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
          { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
        ]
      }
    }
  }
</script>

4.<indicator>的屬性和使用

indicator 只能在 slider 中使用掺逼，說(shuō)白了就是輪播圖底部的小點(diǎn)，不可添加任何子元素瓤介，其中它的樣式也很簡(jiǎn)單：

• item-color, color. 指示點(diǎn)默認(rèn)顏色（未選中態(tài)）吕喘。
• item-selected-color, color. 指示點(diǎn)選中顏色。
• item-size, number. 指示點(diǎn)半徑刑桑。

5.<input>的屬性和使用

Weex 內(nèi)置的 <input> 組件用來(lái)創(chuàng)建接收用戶輸入字符的輸入組件氯质。 <input> 組件的工作方式因 type 屬性的值而異，比如 text祠斧， password闻察，url，email琢锋，tel 等辕漂。值得注意的是，此組件不支持 click 事件吩蔑。請(qǐng)監(jiān)聽 input 或 change 來(lái)代替 click 事件钮热，同時(shí)也不支持任何子組件填抬。

其屬性可見(jiàn)表格：

value | string | 組件的默認(rèn)內(nèi)容 |
placeholder | string | 提示用戶可以輸入什么。 提示文本不能有回車或換行
autofocus | boolean | 布爾類型的數(shù)據(jù)屏歹，表示是否在頁(yè)面加載時(shí)控件自動(dòng)獲得輸入焦點(diǎn)
maxlength | nubmer | 一個(gè)數(shù)值類型的值隐砸，表示輸入的最大長(zhǎng)度
return-key-type | string | 鍵盤返回鍵的類型（即手機(jī)輸入法右下角回車按鈕的地方）

image

其中 placeholder-color {color}峰尝，placeholder 字符顏色。默認(rèn)值是 #999999

<input>組件方法：

focus() 將 input 組件聚焦收恢。

blur() 從 input 組件中移除焦點(diǎn)并關(guān)閉軟鍵盤（如果它具有焦點(diǎn)）境析。

setSelectionRange(selectionStart, selectionEnd) ，設(shè)置文本選區(qū)

getSelectionRange(function(params){}) 派诬，獲取文本選區(qū)

setTextFormatter(params) 劳淆，這是一個(gè)非常有用的特性，可以對(duì) input 設(shè)置一組對(duì)輸入的內(nèi)容進(jìn)行實(shí)時(shí)格式化的規(guī)則

input標(biāo)簽使用及事件處理demo：

<template>
  <div>
    <div class="title">
      <text style="text-align: center;font-size: 50px;">&lt;input&gt; Component Demo</text>
    </div>
    <div class="output">
      <scroller>
        <text>
          {{state}}  {{keyboard_state}}
        </text>
      </scroller>
    </div>
    <div>
      <input test-id="input-obj" ref="range" class="input" type="text" placeholder="input placeholder" @input="eventInput" @change="onChange" @focus="onFocus" @blur="onBlur" @keyboard="onKeyBoard"></input>
    </div>
    <div class="group">
      <div class="panel"><text class="text" @click="setRange">setSelectionRange</text></div>
      <div class="panel"><text class="text" @click="getRange">getSelectionRange</text></div>
    </div>
  </div>
</template>
<script>
  module.exports = {
    data : {
      state:'',
      keyboard_state: ''
    },
    methods : {
      eventInput:function (e) {
        this.state='input: ' + JSON.stringify(e)
      },
      onChange:function(e){
        this.state='change: '+ JSON.stringify(e) 
      },  
      onFocus:function (e) {
        this.state='focus: '+ JSON.stringify(e) 
      }, 
      onBlur:function (e) {
        this.state='blur: '+ JSON.stringify(e)
      },
      onKeyBoard: function(e) {
        this.keyboard_state = "\n onkeyboard: " + JSON.stringify(e)
      },
      setRange() {
        this.$refs.range.setSelectionRange(1, 4);
      },
      getRange() {
        this.$refs.range.getSelectionRange(params => {
          this.state = `當(dāng)前文本選區(qū)為 ${params.selectionStart} ~ ${params.selectionEnd}`;
          this.keyboard_state = "";
        });
      },
    }
  }
</script>

<style scoped>
  .mr-base{
    margin: 10px;
  }
  .title {
      height: 100px;
      margin-top: 30px;
      margin-bottom: 20px;
      flex-direction: column;
      justify-content: center;
  }
  .output {
    border-width: 2px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    width: 650px;
    height: 200px;
    margin-left: 50px;
    margin-top: 20px;
    margin-bottom: 30px;
  }
  .desc{
    color:#aa0000;
    font-size: 30px;
  }
  .input{
    width: 650px;
    height:100px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    placeholder-color: #41B883;
    margin-left: 50px;
    padding-left: 20px;
    font-size: 28px;
  }
  .panel {
    height: 100px;
    flex-direction: column;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    background-color: rgba(162, 217, 192, 0.2);
    margin-left: 20px;
    display:inline-block;
    padding: 10px;
    padding-top: 20px;
  }
  .group {
    flex-direction: row;
    width:auto;
    margin-top: 30px;
    margin-left: 45px;
    margin-right: auto;
  }
</style>

6.<textarea>的屬性和使用

<textarea> 與 <input> 組件類似默赂，可用于接受用戶輸入數(shù)據(jù)沛鸵。<textarea> 支持多行文本輸入。 <textarea> 支持 <input> 支持的所有的屬性缆八、樣式和事件曲掰，不支持子組件。

除了支持 input 支持的所有屬性外奈辰，textarea 還支持 row 屬性栏妖，用于指定輸入的行數(shù)。

• row, number, 默認(rèn)值為2奖恰。

<textarea>的事件：

• 通用事件 支持所有通用事件吊趾。
• input. 當(dāng)輸入狀態(tài)時(shí)，會(huì)不斷觸發(fā)瑟啃。
  • @param value: 當(dāng)前文本论泛。
• change. 當(dāng)用戶完成了輸入時(shí)觸發(fā)。
  • @param value: 當(dāng)前文本蛹屿。
• focus. 當(dāng)輸入框獲得焦點(diǎn)時(shí)觸發(fā)屁奏。
• blur. 當(dāng)輸入框失去焦點(diǎn)時(shí)觸發(fā)。
• return. 當(dāng)用戶點(diǎn)擊了“回車”按鈕時(shí)觸發(fā)错负，會(huì)返回此時(shí)“回車”按鈕的動(dòng)作類型坟瓢。
  • @param value: 當(dāng)前文本勇边。
  • @param returnKeyType, "default" | "go" | "next" | "search" | "send" | "done".
• keyboard. 當(dāng)鍵盤彈起或收起時(shí)觸發(fā)。
  • @param isShow: boolean, 顯示或隱藏鍵盤折联。
  • @param keyboardSize: 鍵盤的高度粥诫，以前端使用的樣式單位返回。

其示例：

<template>
  <div class="wrapper">
    <textarea class="textarea" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></textarea>
  </div>
</template>

<script>
  const modal = weex.requireModule('modal')

  export default {
    methods: {
      oninput (event) {
        console.log('oninput:', event.value)
        modal.toast({
          message: `oninput: ${event.value}`,
          duration: 0.8
        })
      },
      onchange (event) {
        console.log('onchange:', event.value)
        modal.toast({
          message: `onchange: ${event.value}`,
          duration: 0.8
        })
      },
      onfocus (event) {
        console.log('onfocus:', event.value)
        modal.toast({
          message: `onfocus: ${event.value}`,
          duration: 0.8
        })
      },
      onblur (event) {
        console.log('onblur:', event.value)
        modal.toast({
          message: `input blur: ${event.value}`,
          duration: 0.8
        })
      }
    }
  }
</script>

<style>
  .textarea {
    font-size: 50px;
    width: 650px;
    margin-top: 50px;
    margin-left: 50px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    color: #666666;
    border-width: 2px;
    border-style: solid;
    border-color: #41B883;
  }
</style>

至此<recycle-list>崭庸、<scroller>怀浆、<slider>、<indicator>怕享、<textarea>和<input>這六個(gè)組件就學(xué)習(xí)完了执赡，學(xué)起來(lái)是不是覺(jué)得和Android的組件極度相似？所以在學(xué)起來(lái)是沒(méi)有任何難度的函筋。那么下篇博客我們將學(xué)習(xí)Weex剩下的四個(gè)常用組件沙合，不積跬步無(wú)以至千里，新技術(shù)的路上跌帐，加油首懈！