摘要：
当后端返回的数据是完整的（不是按pageSize和pageNum分组发送的）时，前端需要编写更多的js来使用vant list实现延迟加载，并记录main.js:Vue。使用（列表）；Vue.use（PullRefresh）；模板：˂van listv mode
后端返回的数据是一股脑的情况(不是按pageSize，pageNum一组一组的发送)时，前端使用vant-list实现懒加载需要再写一点js，记录一下
main.js:
Vue.use(List);
Vue.use(PullRefresh);
template:
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多数据了"
@load="onLoad">
<div class="listOne" v-for="(item,index) in listAll" :key="index" v-show='item.arrtFlag'> 对原先渲染的对象名更改
//每一条数据渲染的标签内,这里仅以index为例
<span>{{index}}</span>
</div>
</van-list>
</van-pull-refresh>
data(){
return{
matchList:[],
listAll: [],
loading: false,
finished: false,
refreshing: false,
dataLength:0, //原数组长度
count: 0,
}
},
methods:{
getfmatch(){
// 一系列操作(请求接口，处理数据准备渲染页面的data)
this.matchList = data
this.dataLength = data.length
},
onLoad() {
setTimeout(() => {
if (this.refreshing) {
this.listAll = [];
this.refreshing = false;
}
this.count++
console.log(this.count) //打印当前上滑次数，按每次递增10条将this.matchList的每一条放进大数组listAll
this.listAll = []
for (let i = 0; i < 10*this.count; i++) {
this.listAll.push(this.matchList[i]);
}
this.listAll = this.listAll.filter(item => item) //因为是按10的倍数push数据，产生的undefined项需要被移除
this.loading = false;
if (this.listAll.length >= this.dataLength) { //防止重复push
this.finished = true;
}
}, 800);
},
onRefresh() {
// 清空列表数据
this.finished = false;
// 重新加载数据
// 将 loading 设置为 true，表示处于加载状态
this.loading = true;
this.onLoad();
},
}