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