记录一个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是瀑布流滚动加载,用于展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项。
引入
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-text this.finished = false; //同样,也要将finished恢复,否则,执行别的筛选条件时,会显示finished-text,并且导致明明还有数据,但是不会加载出来.
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。