vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vant List组件immediate-check=false无效

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

作者: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;
    }, 
  }

问题场景

解决方法

解决方法十分简单

 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请求去加载数据。

总结

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

您可能感兴趣的文章:
阅读全文