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实现动态生成新表单并添加验证功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要为大家详细介绍了如何通过Vue3实现简单的九宫格抽奖效果,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的可以了解一下2023-10-10
今天小编就为大家分享一篇在axios中使用params传参的时候传入数组的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue中Number方法将字符串转换为数字,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
vue create、vue webpack init创建vue项目产生的项目文件的区别
这篇文章主要介绍了vue create、vue webpack init创建vue项目产生的项目文件的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
Vue.js 在其运行过程中会将模板编译成虚拟 DOM (VNode),然后再将 VNode 渲染成实际的 DOM 节点,这个过程是由 Vue 内部的编译器和渲染系统完成的,本文给大家介绍了Vue3中虚拟dom转成真实dom的过程,需要的朋友可以参考下2024-09-09
electron踩坑之remote of undefined的解决
这篇文章主要介绍了electron踩坑之remote of undefined的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了Vue基础知识快速入门教程,我们可以先学会用，使用一段时间之后，回头来熟悉一下Vue框架以及它的特点,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vue项目部署到IIS后，刷新报错404,这里需要用到URL重写工具 --URL Rewrite，需要的话需要自己下载安装，本文通过图文并茂的形式给大家介绍的非常详细，需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了vue+openlayers绘制省市边界线，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
最新评论