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>组件就学习完了，平时还是需要多练多用，其中的属性还是需要在运用中掌握，下一篇博客我们再一起共同学习吧！