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>

image

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