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

关注

原创最新推荐文章于 2026-06-17 13:19:40 发布 4.6k 阅读 AI 写同款· GEO 优化 ›

set-immediate-shim:简单的`setImmediate`填充设置立即填充简单设置注意：此填充程序效率很低，请参阅。安装 $ npm install set-immediate-shim 用法 const setImmediateShim = require ( 'set-immediate-shim' ) ; setImmediateShim ( ( ) => { console . log ( '2' ) ; } ) ; console . log ( '1' ) ; //=> 1 //=> 2 有关的返回在下一个事件循环中解决的setImmediate()考虑setImmediate() Tidelift帮助维护人员实现开源的可持续发展，同时为公司提供帮助有关其依赖项的安全性，维护和许可的保证。立即下载

使用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

springcloud+nacos+gateway+oauth2小聚会在微服务工程中，Nacos作为目前主流的注册中心和配置中心，Spring Cloud Gateway作为目前主流的网关，下面引入spring security+oauth2+jwt作为认证和授权中心，进行简单的聊聊。阅读详情