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-textthis.finished = false;//同样，也要将finished恢复，否则，执行别的筛选条件时，会显示finished-text,并且导致明明还有数据,但是不会加载出来.

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