Vant中List组件immediate-check=false无效的解决

更新时间：2023年01月20日 08:46:39 作者：My_Java_Life

这篇文章主要介绍了Vant中List组件immediate-check=false无效的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

Vant中List组件immediate-check=false无效

使用vant中的List组件时，会有这样的场景

初始化时想自己触发列表查询，而不想触发 List 组件自带的 load 方法，这时可以设置 immediate-check=false，如下代码，但是这种方式会在下面的场景中出现问题

 <van-list
     ref="vanlist"
     v-model="loading"
     :finished="finished"
     finished-text="已显示全部周报"
     :error.sync="error"
     error-text="请求失败，点击重新加载"
     :immediate-check="false"
     @load="getWorkList()"
 >

 data () {
    return {
      loading: false,
      error: false,
      finished: false
    };
  },
  created () {
    this.getWorkList();
  },
  methods:{
      async getWorkList () {
	     // 调接口查询
	     ....
	     // 加载状态结束
	     this.loading = false;
    }, 
  }

问题场景

前提：A页面跳转到B页面，B为列表页，A页面内容超过一屏
正常：上述代码，正常情况下，A跳转到B时，只执行 created 中的 getWorkList 方法，不触发 List 组件中的 getWorkList
异常：但是由于A中内容超过一屏，页面滚动到底部后，再点击跳转到B时，就会将 created 和 List 组件的 getWorkList 都执行一次，导致列表数据重复展示

解决方法

解决方法十分简单

 data () {
    return {
      loading: false 修改为=> loading: true
    };
  },

immediate-check无效的原因分析

vant官网中给出的load触发条件很明确，也就是offset决定了触发与否

下面两张图是List组件源码，可以看出，immediate-check无法阻止滚动条的监听事件，滚动条与底部距离小于offset 时，load事件该触发还是会触发。

因此，immediate-check属性准确的说明应该是：

是否在初始化时立即执行滚动位置检查（滚动条与底部距离小于offset 时设置无效）

Vant list组件使用的坑

1.解决请求两次数据重复

把finish的初始值设置为true,然后添加 immediate-check=true

2.如何判断finish为true的情况

一般看网络请求返回的是code是否为错误码

3.每次切换tabs栏目必须让变量finish的值更新为false这样才会在上拉的时候重新去发送ajax请求去加载数据。

总结

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

您可能感兴趣的文章:

Vue中正确使用Element-UI组件的方法实例
这篇文章主要给大家介绍了关于Vue中正确使用Element-UI组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
Vue Router应用方法详解
在看这篇文章的几点要求：需要你先知道Vue-Router是个什么东西，用来解决什么问题，以及它的基本使用。如果你还不懂的话，建议上官网了解下Vue-Router的基本使用后再回来看这篇文章
2022-09-09
vue中echarts点击事件点击一次多次触发问题
这篇文章主要介绍了vue中echarts点击事件点击一次多次触发问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
vue使用Canvas在画布上添加图片方式
这篇文章主要介绍了vue使用Canvas在画布上添加图片方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue遍历对象中的数组取值示例
今天小编就为大家分享一篇vue遍历对象中的数组取值示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue 结合webpack的初级使用指南小白学习篇
这篇文章主要为大家介绍了vue 结合webpack的初级使用指南非常适合入门webpack的小白学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
vue2组件进阶与插槽详解(推荐!)
插槽(slot)作用是让父组件可以往子组件指定位置插入 html 结构,也是组件的一种通信方式,下面这篇文章主要给大家介绍了关于vue2组件进阶与插槽的相关资料,需要的朋友可以参考下
2023-02-02
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
本篇文章主要介绍了详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
这篇文章主要介绍了解决webpack vue 项目打包生成的文件,资源文件报404问题的修复方法,需要的朋友可以参考下
2018-01-01
Vue3中事件总线的具体使用
本文主要介绍了Vue3中事件总线的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04