本篇内容介绍了“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是瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。
引入
import Vue from 'vue';import { List } from 'vant'; Vue.use(List);页面渲染
<van-list class="mylist" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <van-cell v-for="(item,index) in list" :key="index" class="mycell"> {{item.name}} </van-cell></van-list>数据定义
export default { 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:{ async onLoad() { this.loading = true;//防止第一页重复加载 this.queryParams.jigou = this.defaultdept listWuzicount(this.queryParams).then(res => { this.total = res.total; if(this.total <= this.queryParams.pageSize){ this.list= res.rows }else{ this.queryParams.pageNum++; let arr = 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 = val this.list= [] this.queryParams.pageNum = 1 this.finished = false; this.onLoad(); }, keyWords(val){ this.queryParams.deptname = val this.list= [] this.queryParams.pageNum = 1 this.finished = false; this.onLoad(); }, }重点总结
this.queryParams.pageNum = 1//每次走完函数，将当前页恢复至1，防止后面累加，导致点击别的筛选条件时无效，返回finished-textthis.finished = false;//同样，也要将finished恢复，否则，执行别的筛选条件时，会显示finished-text,并且导致明明还有数据,但是不会加载出来.“van-list不断onLoad加载怎么解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
