-
<list>組件是提供垂直列表功能的核心組件株汉，擁有平滑的滾動(dòng)和高效的內(nèi)存管理吕朵，非常適合用于長(zhǎng)列表的展示操骡。最簡(jiǎn)單的使用方法是在<list>標(biāo)簽內(nèi)使用一組由簡(jiǎn)單數(shù)組repeat生成的<cell>標(biāo)簽填充。
子組件
<list> 的子組件只能包括以下4種組件或是 fix 定位的組件惑朦，其他形式的組件將不能被正確的渲染呢簸。
<cell>用于定義列表中的子列表項(xiàng)矮台。Weex 會(huì)對(duì)<cell>進(jìn)行高效的內(nèi)存回收以達(dá)到更好的性能。當(dāng)
<header>到達(dá)屏幕頂部時(shí)根时，吸附在屏幕頂部瘦赫。<refresh>用于給列表添加下拉刷新的功能。<loading>用于給列表添加上拉加載更多的功能蛤迎。
特性
-
loadmoreoffset {number}：默認(rèn)值為 0耸彪，觸發(fā)loadmore事件所需要的垂直偏移距離（設(shè)備屏幕底部與頁面底部之間的距離）。當(dāng)頁面的滾動(dòng)條滾動(dòng)到足夠接近頁面底部時(shí)將會(huì)觸發(fā)loadmore這個(gè)事件忘苛。
事件
-
loadmore：如果滾動(dòng)到底部將會(huì)立即觸發(fā)這個(gè)事件，你可以在這個(gè)事件的處理函數(shù)中加載下一頁的列表項(xiàng)唱较。
約束
不允許相同方向的
<list>或者<scroller>互相嵌套扎唾，換句話說就是嵌套的<list>/<scroller>必須是不同的方向。<list>為根節(jié)點(diǎn)時(shí)無需設(shè)置高度南缓，但是內(nèi)嵌<list>高度必須可計(jì)算胸遇，你可以使用flex或postion將<list>設(shè)為一個(gè)響應(yīng)式高度（例如全屏顯示）, 也可以顯式設(shè)置<list>組件的height樣式。
示例vue
<template>
<list class="list" @loadmore="fetch" loadmoreoffset="10">
<cell class="cell" v-for="num in lists">
<div class="panel">
<text class="text">{{num}}</text>
</div>
</cell>
</list>
</template>
<script>
const modal = weex.requireModule('modal')
const LOADMORE_COUNT = 4
export default {
data () {
return {
lists: [1, 2, 3, 4, 5]
}
},
methods: {
fetch (event) {
modal.toast({ message: 'loadmore', duration: 1 })
setTimeout(() => {
const length = this.lists.length
for (let i = length; i < length + LOADMORE_COUNT; ++i) {
this.lists.push(i + 1)
}
}, 800)
}
}
}
</script>
<style scoped>
.panel {
width: 600px;
height: 250px;
margin-left: 75px;
margin-top: 35px;
margin-bottom: 35px;
flex-direction: column;
justify-content: center;
border-width: 2px;
border-style: solid;
border-color: rgb(162, 217, 192);
background-color: rgba(162, 217, 192, 0.2);
}
.text {
font-size: 50px;
text-align: center;
color: #41B883;
}
</style>
SDK源碼
- 組件類：
WXListComponent
[self registerComponent:@"list" withClass:NSClassFromString(@"WXListComponent") withProperties:nil];
- 從
WXScrollerComponent組件繼承而來汉形，這個(gè)和UITableView繼承自UIScrollView的思路是一樣的
@interface WXListComponent : WXScrollerComponent
- 在具體實(shí)現(xiàn)上纸镊，里面包含了一個(gè)
UITableView，并沒有基于WXScrollerComponent來實(shí)現(xiàn)概疆。使用了繼承逗威，同時(shí)又自己另外搞一套，思路還是比較奇特的岔冀。
- (UIView *)loadView
{
return [[WXTableView alloc] init];
}
- (void)viewDidLoad
{
[super viewDidLoad];
_tableView = (UITableView *)self.view;
_tableView.allowsSelection = NO;
_tableView.allowsMultipleSelection = NO;
_tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
_tableView.delegate = self;
_tableView.dataSource = self;
_tableView.userInteractionEnabled = YES;
}
- 自定義的WXTableView是一個(gè)內(nèi)部類凯旭，沒做什么，只是關(guān)閉了AutoLayout而已。其他地方也不會(huì)用到罐呼，所以這里用內(nèi)部類的方式還是可以理解的鞠柄。
@interface WXTableView : UITableView
@end
@implementation WXTableView
+ (BOOL)requiresConstraintBasedLayout
{
return NO;
}
- (void)layoutSubviews
{
[super layoutSubviews];
[self.wx_component layoutDidFinish];
}
@end
- 至于“擁有平滑的滾動(dòng)和高效的內(nèi)存管理”，暫時(shí)還沒看出有什么特別的地方嫉柴。當(dāng)然iOS的
UITableView已經(jīng)足夠出色厌杜，這樣說也是沒問題的。
