van-list不断onLoad加载怎么解决

本篇内容介绍了“van-list不断onLoad加载怎么解决”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

van-list不断onLoad加载的坑

van-list 下拉的时候，不断请求后台加载数据，真的是坑。。。。

this.$http.post(url,params).then(function(res){this.list=[];if(res.data.data.length==0){that.finished=true}else{that.list=[...that.list,...res.data.data]}that.loading=false}).catch((reason)=>{Toast.fail("查询列表数据!"+reason);})

首先说下出现不断加载的一种情况， 解决方法是设置:offset="20"；

这是网上常说的，然而并没有什么卵用。。。

我这里出现不断加载的原因是

this.list=[];

坑爹，不能清空，清空之后就会判断没填满空间，就会不断加载。。。。

van-list列表下拉加载更多onLoad事件

van-list是瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。

引入

importVuefrom'vue';import{List}from'vant';Vue.use(List);

页面渲染

<van-listclass="mylist"v-model="loading":finished="finished"finished-text="没有更多了"@load="onLoad"><van-cellv-for="(item,index)inlist":key="index"class="mycell">{{item.name}}</van-cell></van-list>

数据定义

exportdefault{data(){return{list:[],loading:false,finished:false,total:0,//查询参数queryParams:{pageNum:0,pageSize:6,deptname:null,username:null,createTime:null,jigou:null,},defaultdept:null,keyWords:"",};},}

方法实现

methods:{asynconLoad(){this.loading=true;//防止第一页重复加载this.queryParams.jigou=this.defaultdeptlistWuzicount(this.queryParams).then(res=>{this.total=res.total;if(this.total<=this.queryParams.pageSize){this.list=res.rows}else{this.queryParams.pageNum++;letarr=res.rows;this.list=this.list.concat(arr);};//加载状态结束this.loading=false;//数据全部加载完成if(this.list.length>=this.total){this.finished=true;}})},},watch:{defaultdept(val){this.queryParams.jigou=valthis.list=[]this.queryParams.pageNum=1this.finished=false;this.onLoad();},keyWords(val){this.queryParams.deptname=valthis.list=[]this.queryParams.pageNum=1this.finished=false;this.onLoad();},}

重点总结

this.queryParams.pageNum=1//每次走完函数，将当前页恢复至1，防止后面累加，导致点击别的筛选条件时无效，返回finished-textthis.finished=false;//同样，也要将finished恢复，否则，执行别的筛选条件时，会显示finished-text,并且导致明明还有数据,但是不会加载出来.

“van-list不断onLoad加载怎么解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注主机评测网网站，小编将为大家输出更多高质量的实用文章！

上一篇：php在windows和linux中有哪些区别

下一篇：C#怎么利用递归算法解决汉诺塔问题

---