van-list 加载

【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>
————————————————
版权声明:本文为CSDN博主「易小花」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44272792/article/details/108081998
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;//结束,显示我也是有底线的
	};
    });
}

————————————————
版权声明:本文为CSDN博主「易小花」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44272792/article/details/108081998

posted @   820820820  阅读(164)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示