浅谈Vant-list 上拉加载及下拉刷新的问题

 更新时间:2022年04月25日 15:02:17   作者:我去没名字了  
这篇文章主要介绍了浅谈Vant-list 上拉加载及下拉刷新的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vant-list 上拉加载及下拉刷新

第一步引入

import { Notify, Dialog, Image, List, PullRefresh } from 'vant'
import Vue from 'vue'
Vue.use(Image).use(List).use(PullRefresh)

第二步

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <!-- 这里根据自己需要展示数据 -->
       </van-list>
    </van-pull-refresh>

第三步

 data () {
    return {
      productList: [], //异步查询数据
      loading: false, //自定义底部加载中提示
      finished: false,//自定义加载完成后的提示文案
      refreshing: false,//清空列表数据
      pageNo: 0 //当前页码
    }
  }

第四步

  methods: {
    onLoad () {
      this.pageNo++
      setTimeout(() => {
        if (this.refreshing) {
          this.productList = []
          this.refreshing = false
        }
        this.loading = false
        const shopId = this.$store.state.user.shopId
        //这里是ajax请求  根据自己业务需求
        pageList({ shopId: shopId, pageNo: this.pageNo, pageSize: 2 }).then(res => {
          if (this.validResp(res)) {
            this.total = res.data.pageNo
            this.loading = true
            this.productList.push(...res.data.dataList)
          }
          if (this.productList.length >= parseInt(res.data.pageNo)) {
            this.finished = true
          }
        })
      }, 1000)
    },
    onRefresh () {
      this.finished = false
      this.loading = true
      this.pageNo = 0
      this.onLoad()
    }
    }

vant下拉刷新与上拉加载一起使用问题

下拉刷新触发两次 list与pull

//下拉刷新
 onRefresh() {
                this.list = [];
                this.curPage = 1;
                this.finished = true;
                this.getData();
  },
getData() {
                this.isLoading = false;
                getList({
                    curPage: this.curPage,
                    pageSize: this.pageSize
                }).then((res) => {
 
                    this.listLoading = false;
 
                    if (res.code == 200) {
                        this.list = this.list.concat(res.data.list);
                        this.curPage = res.data.nextPage;
                        if (this.list.length >= res.data.total) {
                            this.finished = true;
                        }else {
                            this.finished = false;
                        }
                    }
                })
            },

原因是在于下拉刷新的时候触发了上拉加载,所以执行了两次

解决方法是

先将list组价的finished=true,数据加载完了在判断该值应该是true还是false,这样可以避免在下拉刷新的时候触发上拉加载。

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

相关文章

  • vue关于data变量定义的问题

    vue关于data变量定义的问题

    这篇文章主要介绍了vue关于data变量定义的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue中使用codemirror的实例详解

    vue中使用codemirror的实例详解

    这篇文章主要介绍了vue中使用codemirror的实例教程,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-11-11
  • Vue中slot插槽作用与原理详解

    Vue中slot插槽作用与原理详解

    插槽slot可以说在一个Vue项目里面处处都有它的身影,比如我们使用一些UI组件库的时候,我们通常可以使用插槽来自定义我们的内容,这篇文章主要介绍了Vue3中slot插槽使用方式,需要的朋友可以参考下
    2022-09-09
  • Vue项目优化打包详解

    Vue项目优化打包详解

    这篇文章主要为大家介绍了Vue项目的优化打包,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • Vue.js项目在apache服务器部署问题解决

    Vue.js项目在apache服务器部署问题解决

    本文主要介绍了Vue.js项目在apache服务器部署问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 详解vue-cli脚手架build目录中的dev-server.js配置文件

    详解vue-cli脚手架build目录中的dev-server.js配置文件

    这篇文章主要介绍了详解vue-cli脚手架build目录中的dev-server.js配置文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue项目打包发布后接口报405错误的解决

    vue项目打包发布后接口报405错误的解决

    这篇文章主要介绍了vue项目打包发布后接口报405错误的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue中的el-form表单rule校验问题(特殊字符、中文、数字等)

    vue中的el-form表单rule校验问题(特殊字符、中文、数字等)

    这篇文章主要介绍了vue中的el-form表单rule校验问题(特殊字符、中文、数字等),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 如何用Vite构建工具快速创建Vue项目

    如何用Vite构建工具快速创建Vue项目

    Vite是一个web开发构建工具,由于其原生 ES 模块导入方法,它允许快速提供代码,下面这篇文章主要给大家介绍了关于如何用Vite构建工具快速创建Vue项目的相关资料,需要的朋友可以参考下
    2022-05-05
  • vue3使用深度选择器修改样式问题

    vue3使用深度选择器修改样式问题

    这篇文章主要介绍了vue3使用深度选择器修改样式问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论