背景:
app的列表需要分页加载,初始方案是使用list组件的onReachEnd事件进行触发,但是使用以后会发现有问题这个东西,刚进入页面加载的时候因为数据还没加载出来会触发这个事件,还有如果页面数据较少没有撑满这一页也会一直触发,综合考虑下来使用第三方库有一个封装的组件:PullToRefresh
代码实现:
一.调用组件
这个代码列表刷新方法在父组件所以onRefresh中使用emitter去进行事件传递来进行刷新数据,如果不需要,可以替代自己的请求数据方法
PullToRefresh({
// 必传项,列表组件所绑定的数据
data: this.NoCrimelist,
// 必传项,需绑定传入主体布局内的列表或宫格组件
scroller: this.scroller,
// 必传项,自定义主体布局,内部有列表或宫格组件
customList: () => {
// 一个用@Builder修饰过的UI方法
this.getListView();
},
// 可选项,下拉刷新回调
onRefresh: () => {
return new Promise<string>((resolve, reject) => {
// 重新计数
this.pageNum =1
let eventData: emitter.EventData = {
data: {
"page": this.pageNum,
}
};
emitter.emit('refReshListId',eventData)
resolve('刷新成功');
});
},
// 可选项,上拉加载更多回调
onLoadMore: () => {
return new Promise<string>((resolve, reject) => {
let eventData: emitter.EventData = {
data: {
"page": this.pageNum +1,
type:1
}
};
emitter.emit('refReshListId',eventData)
resolve('');
});
},
customLoad: null,
customRefresh: null,
})
二.传入的list列表
注意!!! 一定要设置edgeEffect属性为none否则不会滚动,并且初始化Scroller
private scroller: Scroller = new Scroller();
@Builder getListView(){
List({ space: 20,scroller:this.scroller }) {
ForEach(this.NoCrimelist, (item: ListBean,index:number) => {
ListItem() {
}
}, (item: ListBean) => item.applayTime)
}
.edgeEffect(EdgeEffect.None)
}