记录一个van-list不断onLoad加载的坑及解决

 更新时间:2022年04月25日 14:19:54   作者:七八月的天空  
这篇文章主要介绍了记录一个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,并且导致明明还有数据,但是不会加载出来.

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue.js进行查询操作的实例详解

    Vue.js进行查询操作的实例详解

    这篇文章主要介绍了Vue.js进行查询操作的实例详解的相关资料,需要的朋友可以参考下
    2017-08-08
  • vue实现省市区的级联选择

    vue实现省市区的级联选择

    这篇文章主要为大家详细介绍了vue实现省市区的级联选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue代码分割的实现(codesplit)

    vue代码分割的实现(codesplit)

    这篇文章主要介绍了vue代码分割的实现(codesplit),做了代码分割后,会将代码分离到不同的bundle中,然后进行按需加载这些文件,需要的朋友可以参考下
    2018-11-11
  • vue 中swiper的使用教程

    vue 中swiper的使用教程

    本文通过实例代码给大家介绍了vue 中swiper的使用,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • ant design vue动态循环生成表单以及自定义校验规则详解

    ant design vue动态循环生成表单以及自定义校验规则详解

    这篇文章主要介绍了ant design vue动态循环生成表单以及自定义校验规则详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Vuejs第六篇之Vuejs与form元素实例解析

    Vuejs第六篇之Vuejs与form元素实例解析

    本文通过实例给大家详细介绍了Vuejs与form元素的相关知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • vue移动端html5页面根据屏幕适配的四种解决方法

    vue移动端html5页面根据屏幕适配的四种解决方法

    在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块主要有四个方法可以适用。这篇文章主要介绍了vue移动端h5页面根据屏幕适配的四种方案 ,需要的朋友可以参考下
    2018-10-10
  • vue百度地图 + 定位的详解

    vue百度地图 + 定位的详解

    这篇文章主要介绍了vue百度地图 + 定位的详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue实现原生下拉刷新

    vue实现原生下拉刷新

    这篇文章主要为大家详细介绍了vue实现原生下拉刷新,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue实现打印功能的示例代码

    vue实现打印功能的示例代码

    这篇文章主要为大家详细介绍了如何通过vue实现打印功能,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12

最新评论