-
<list>组件是提供垂直列表功能的核心组件，拥有平滑的滚动和高效的内存管理，非常适合用于长列表的展示。最简单的使用方法是在<list>标签内使用一组由简单数组repeat生成的<cell>标签填充。
子组件
<list> 的子组件只能包括以下4种组件或是 fix 定位的组件，其他形式的组件将不能被正确的渲染。
<cell>用于定义列表中的子列表项。Weex 会对<cell>进行高效的内存回收以达到更好的性能。当
<header>到达屏幕顶部时，吸附在屏幕顶部。<refresh>用于给列表添加下拉刷新的功能。<loading>用于给列表添加上拉加载更多的功能。
特性
-
loadmoreoffset {number}：默认值为 0，触发loadmore事件所需要的垂直偏移距离（设备屏幕底部与页面底部之间的距离）。当页面的滚动条滚动到足够接近页面底部时将会触发loadmore这个事件。
事件
-
loadmore：如果滚动到底部将会立即触发这个事件，你可以在这个事件的处理函数中加载下一页的列表项。
约束
不允许相同方向的
<list>或者<scroller>互相嵌套，换句话说就是嵌套的<list>/<scroller>必须是不同的方向。<list>为根节点时无需设置高度，但是内嵌<list>高度必须可计算，你可以使用flex或postion将<list>设为一个响应式高度（例如全屏显示）, 也可以显式设置<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组件继承而来，这个和UITableView继承自UIScrollView的思路是一样的
@interface WXListComponent : WXScrollerComponent
- 在具体实现上，里面包含了一个
UITableView，并没有基于WXScrollerComponent来实现。使用了继承，同时又自己另外搞一套，思路还是比较奇特的。
- (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是一个内部类，没做什么，只是关闭了AutoLayout而已。其他地方也不会用到，所以这里用内部类的方式还是可以理解的。
@interface WXTableView : UITableView
@end
@implementation WXTableView
+ (BOOL)requiresConstraintBasedLayout
{
return NO;
}
- (void)layoutSubviews
{
[super layoutSubviews];
[self.wx_component layoutDidFinish];
}
@end
- 至于“拥有平滑的滚动和高效的内存管理”，暂时还没看出有什么特别的地方。当然iOS的
UITableView已经足够出色，这样说也是没问题的。
