【vant】van-list下拉加载更多onload事件
问题描述
van-list
编写下拉加载更多,利用van-list
自带的下拉加载事件@load="onLoad"
,但是发现有次数限制,仍有部分条件下无法下拉加载更多。后来发现原因,执行完,之后finished恢复false,同时将当前页恢复为1,不写的话,代码不会自己恢复,因为这些参数是全局变量,所以会保留最后执行之后的结果。所以,在代码执行前要做一个恢复。细节很重要,因为这个细节,耽误了很久时间。
this.currentPage = 1;
//每次走完函数,将当前页恢复至1,防止后面累加,导致点击别的筛选条件时无效,返回finished-text
this.finished = false;
//同样,也要将finished恢复,否则,执行别的筛选条件时,会显示finished-text,并且导致明明还有数据,但是不会加载出来.
主要代码如下
<van-list
v-model="loading"
:finished="finished"
finished-text="我是有底线的~"
@load="onLoad">//list自带的下拉刷新事件
<van-row
v-for="(item,key) of Array"
:key="key"
</van-row>//循环,显示列表
</van-list>
selType(type) {//从前端的点击事件获得type
this.selectedType = type;
console.log(this.selectedType);
this.currentPage = 1;
//每次走完函数,将当前页恢复至1,防止后面累加,导致点击别的筛选条件时无效,返回finished-text
this.finished = false;
//同样,也要将finished恢复,否则,执行别的筛选条件时,会显示finished-text,并且导致明明还有数据,但是不会加载出来.
this.onLoad();
},
onLoad(){
this.search();
}
search() {//调用查询的接口
let params = {
type: this.selectedType,
index: this.currentPage,//页数
size: this.pageSize,//每页个数
}
.....(接口)(params).then(res => {
console.log(res);
this.dataTotal = res.total;
//进行判断
if(this.dataTotal <= this.pageSize){
this.Array = res.data.list;
console.log(this.Array);
}else{
this.currentPage++;
let arr = res.data.data.list;
this.Array = this.Array.concat(arr);
};
// 加载状态结束
this.loading = false;
// 数据全部加载完成
if (this.Array.length >= this.dataTotal) {
this.finished = true;//结束,显示我也是有底线的
};
});
}