Weex内置元件的使用——Weex的學習之路（三）

上一篇文章我們看了<a>、<div>、<text>和<image>标簽，這些都是在weex中常用到的标簽，除了這些标簽的基本使用，同時還需注意樣式。對css樣式還不是太熟悉的小夥伴要先看看flex。那麼這節我們一塊來學習<list>、<cell>、<loading>和<refresh>元件。

不管是在App中還是H5頁面中，清單是很常見的元件，

<list>

元件是提供垂直清單功能的核心元件，擁有平滑的滾動和高效的記憶體管理，非常适合用于長清單的展示。最簡單的使用方法是在

<list>

标簽内使用一組由簡單數組循環生成的

<cell>

标簽填充。其簡單使用如下：

<template>
  <list>
    <cell v-for="num in lists">
      <text>{{num}}</text>
    </cell>
  </list>
</template>

<script>
  export default {
    data () {
      return {
        lists: ['A', 'B', 'C', 'D', 'E']
      }
    }
  }
</script>
           

特别需要注意兩點：

• 不允許相同方向的

  <list>

  或者

  <scroller>

  互相嵌套，換句話說就是嵌套的

  <list>

  /

  <scroller>

  必須是不同的方向。

• <list>

  需要顯式的設定其寬高，可使用

  position: absolute;

  定位或

  width

  、

  height

  設定其寬高值。

<list>

的子元件隻能包括以下四種元件或是

fix

定位的元件，其他形式的元件将不能被正确渲染：

• <cell>

  用于定義清單中的子清單項，類似于 HTML 中的 ul 之于 li。Weex 會對

  <cell>

  進行高效的記憶體回收以達到更好的性能。

• <header>

  當

  <header>

  到達螢幕頂部時，吸附在螢幕頂部。

• <refresh>

  用于給清單添加下拉重新整理的功能。

• <loading>

  用法與特性和

  <refresh>

  類似，用于給清單添加上拉加載更多的功能。

list标簽裡常會用到<

header

><

refresh

>和<

loading

>元件，那麼接下來我們看看具體的使用。

1.<cell>的介紹和使用

Cell 必須以一級子元件的形式存在于

list、

recycler和

waterfall

中，支援添加任意類型的元件作為自己的子元件，但是請不要再内部添加滾動容器了，它有四個屬性：

• keep-scroll-position boolean. 控制當 Cell 被添加到清單中時，清單的滾動位置是否要保持不變。
• insert-animation string, cell 的插入動畫。目前隻支援

  none

  和

  default

  。
• delete-animation string, cell 的删除動畫。目前隻支援

  none

  和

  default

  。
• recycle boolean, 預設值 true。這個屬性控制這個 Cell 的 view 和子 views 是否在清單滾動時進行回收，在 iOS 上通常必須指定為 true （因為預設為 true，是以一般不需要寫這個屬性），如果設定為 false，清單滾動時，頁面會占用非常高的記憶體。Android上預設是true，設定為false可以防止Image和Text上資料重新綁定。

使用示例可見上方<list>裡<cell>的使用，同時也有兩點需要大家注意的：

• 不要指定

  <cell>

  的

  flex

  值。Cell 的寬度是由它的父容器決定的，你也不需要指定它的高度。
• Cell 的排版的位置是由父容器控制的，是以一般不要為其指定

  margin

  樣式。

2.

<refresh>

的用法

<refresh>

為容器提供下拉重新整理功能，使用示例如下所示：

<template>
  <list>
    <refresh>
      <text>Refreshing...</text>
      <loading-indicator></loading-indicator>
    </refresh>
    <cell v-for="num in lists">
      <text>{{num}}</text>
    </cell>
  </list>
</template>

<script>
  export default {
    data () {
      return {
        lists: ['A', 'B', 'C', 'D', 'E']
      }
    }
  }
</script>
           

諸如

<text>

、

<image>

之類的任何元件，都可以放到

<loading>

進行渲染，特殊子元件

<loading-indicator>

: 隻能作為

<refresh>

和

<loading>

的子元件使用，擁有預設的動畫效果實作。其中

<loading-indicator>在使用的過程中一定要和

<text>Refreshing...</text>的布局處理好，否則或有重疊，同時Android和Ios上面的顯示效果不一樣。自帶的重新整理動畫往往不能滿足UI的需要，這是就需要我們自定義了，這個我在後續的部落格會給大家講到。

display

屬性是控制

<refresh>

元件顯示、隐藏。

display

的設定必須成對出現，即設定

display="show"

,必須有對應的

display="hide"

。可選值為

show / hide

，預設值為

show；<refresh>有兩個事件，refresh和pullingdown。其中 refresh 事件

當

<scroller>

、

<list>

、

<waterfall>

被下拉完成時觸發；當

<scroller>

、

<list>

、

<waterfall>

被下拉時觸發。

pullingdown

可以從

event

參數對象中擷取以下資料：

• dy

  : 前後兩次回調滑動距離的內插補點

• pullingDistance

  : 下拉的距離

• viewHeight

  : refresh 元件高度

• type

  : “pullingdown” 常數字元串

使用示例和效果圖如下：

<template>
  <list>
    <refresh @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ?  'show' : 'hide'">
      <text>Refreshing...</text>
      <loading-indicator></loading-indicator>
    </refresh>
    <cell v-for="num in lists">
      <text>{{num}}</text>
    </cell>
  </list>
</template>

<script>
  export default {
    data () {
      return {
        lists: ['A', 'B', 'C', 'D', 'E']
      }
    }
  }
</script>
           

3.

<

loading

>

的用法

<loading>

為容器提供上拉加載功能，它同

<refresh>

一樣隻能在

<scroller>

、

<list>

、

<waterfall>

被它們包含時才能被正确渲染，廢話不多說，咱們一起來看看具體的使用方法：

<template>
  <list>
    <refresh @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ?  'show' : 'hide'">
      <text>Refreshing...</text>
      <loading-indicator></loading-indicator>
    </refresh>
    <cell v-for="num in lists">
      <text>{{num}}</text>
    </cell>
    <loading @loading="onloading" :display="loadinging ? 'show' : 'hide'">
      <text>Loading</text>
      <loading-indicator></loading-indicator>
    </loading>
  </list>
</template>

<script>
  export default {
    data () {
      return {
        lists: ['A', 'B', 'C', 'D', 'E']
      }
    }
  }
</script>
           

其中

<text>

、

<image>

之類的任何元件，都可以放到

<loading>

進行渲染，元件

<loading-indicator>的使用和<refresh>的使用是相同的。loading

事件中當

<scroller>

、

<list>

、

<waterfall>

被上拉完成時觸發，其中loading事件中

display

屬性的用法也是相同的。

到這我們的<list>、<cell>、<loading>和<refresh>元件就學習完了，平時還是需要多練多用，其中的屬性還是需要在運用中掌握，下一篇部落格我們再一起共同學習吧！