记录一个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-cli初始化项目中使用less的方法

    vue-cli初始化项目中使用less的方法

    vue-cli 是 vue.js 的脚手架工具,可以帮助我们编写基础代码、快速搭建开发环境。下面这篇文章主要给大家介绍了关于vue-cli初始化项目中使用less的相关资料,需要的朋友可以参考借鉴,下面随着小编来一起看看吧
    2018-08-08
  • vue组件父子间通信之综合练习(聊天室)

    vue组件父子间通信之综合练习(聊天室)

    这篇文章主要为大家详细介绍了vue组件父子间通信之综合练习聊天室制作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vue弹窗组件的实现示例代码

    vue弹窗组件的实现示例代码

    这篇文章主要介绍了vue弹窗组件的实现示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 基于vue+face-api.js实现前端人脸识别功能

    基于vue+face-api.js实现前端人脸识别功能

    基于face-api.js要实现人脸识别功能,首先要将自己需要的模型文件下载保存在静态目录下,可以通过cdn的方式在index.html中引入face-api.js,本文给大家介绍vue+face-api.js实现前端人脸识别功能,感兴趣的朋友一起看看吧
    2023-12-12
  • vue中的非父子间的通讯问题简单的实例代码

    vue中的非父子间的通讯问题简单的实例代码

    这篇文章主要介绍了vue中的非父子间的通讯问题简单的实例代码,需要的朋友可以参考下
    2017-07-07
  • 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

    详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

    本篇文章主要介绍了详解使用vue-router进行页面切换时滚动条位置与滚动监听事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • Vue3 中 watch 与 watchEffect 区别及用法小结

    Vue3 中 watch 与 watchEffect 区别及用法小结

    这篇文章主要介绍了Vue3 中 watch 与 watchEffect 有什么区别?watch中需要指明监视的属性,也需要指明监视的回调,而watchEffect中不需要指明监视的属性,只需要指明监视的回调,回调函数中用到哪个属性,就监视哪个属性,本文给大家详细介绍,需要的朋友参考下
    2022-06-06
  • vue cli 3.0通用打包配置代码,不分一二级目录

    vue cli 3.0通用打包配置代码,不分一二级目录

    这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 解决vue-router进行build无法正常显示路由页面的问题

    解决vue-router进行build无法正常显示路由页面的问题

    下面小编就为大家分享一篇解决vue-router进行build无法正常显示路由页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue使用monaco editor汉化右键菜单示例

    vue使用monaco editor汉化右键菜单示例

    这篇文章主要为大家介绍了vue使用 monaco editor 汉化右键菜单实现汉化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08

最新评论