上一篇文章我們看了<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>組件就學習完了，平時還是需要多練多用，其中的屬性還是需要在運用中掌握，下一篇博客我們再一起共同學習吧！