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

目录
  • Vant中List组件immediate-check=false无效
    • 问题场景
    • 解决方法
  • Vant list组件使用的坑
  • 总结

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

总结

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

赞 (0)

相关推荐

  • vue中vant组件样式失效问题及解决

    目录 vant组件样式失效 通常有以下几种解决方法 修改vant组件样式 vant组件样式失效 vue项目中引入vant组件,若发现vant组件样式失效 通常有以下几种解决方法 方法一:引入全局样式   在引入vant组件的地方或者全局引入vant组件所有的样式,引入方法为:在vue引入vant的页面中,添加以下代码: import 'vant/lib/index.css' 这样可以引入vant全部样式,不过通常我们可以按需引入,如法二,局部引入部分样式即可. 方法二:局部引入样式   顾名思义

  • 使用Vant框架list组件遇到的坑及解决

    使用Vant框架list组件遇到的坑及解决

    目录 使用Vant框架list组件的坑 介绍 特性 聊一下使用list组件遇到的坑 vant中van-list的使用 使用Vant框架list组件的坑 介绍 Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间. Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一. 特性 提供 60 多个高质量组件,覆盖移动端各类场景 性能极佳,组件平均体积不到 1kb(min+gzip) 单元测试覆盖率 90%+,提供稳定性保障 完善的

  • vue vantUI tab切换时 list组件不触发load事件的问题及解决方法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会自动加载一次,可以:immediate-check="false" 这样设置一下,页面加载完成后就不会自动加载一次了 ) 看上去一切都很美好:但是tab进行切换的时候,list组件的load事件不会再次被触发!!!就是list组件做上拉加载只有在第一个tab会触发,切换后触底不会再次触发

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

    目录 Vant中List组件immediate-check=false无效 问题场景 解决方法 Vant list组件使用的坑 总结 Vant中List组件immediate-check=false无效 使用vant中的List组件时,会有这样的场景 初始化时想自己触发列表查询,而不想触发 List 组件自带的 load 方法,这时可以设置 immediate-check=false,如下代码,但是这种方式会在下面的场景中出现问题 <van-list ref="vanlist"

  • vue vant中picker组件的使用

    1.引入 import { Picker } from 'vant' 2.使用 components: { vanPicker: Picker, } 3.渲染 <van-picker show-toolbar :columns="columns" value-key="text" /> 4.将值push到columns //注意的点vant默认的是text,如果你需要修改需要value-key="你要定义的名字",否则不会渲染 thi

  • IE8中动态创建script标签onload无效的解决方法

    本文实例讲述了IE8中动态创建script标签onload无效的解决方法.分享给大家供大家参考.具体分析如下: 今天做项目,发现一个奇怪的问题,动态创建的script标签在IE8下无法触发onload事件. 代码如下: 复制代码 代码如下: var loadJs = function(src, fun){     var script = null;     script = document.createElement("script");     script.type = &qu

  • 在vue中使用回调函数,this调用无效的解决

    let self = this //使用新变量替换this,以免this无效 //updateStudentInfoToServer是一个将本身部分数据异步上传的接口,接收三个参数,其中第一个是数据,第二.三个是函数,第二.三个函数使用function(){}形式书写 updateStudentInfoToServer:function(data, networkOk, networkError){ let postData = this.$qs.stringify({ data:data })

  • SpringBoot2.x中management.security.enabled=false无效的解决

    SpringBoot2.x中management.security.enabled=false无效的解决

    management.security.enabled=false无效 一.在1.5.x版本中通过management.security.enabled=false来暴露所有端点 具体配置类: org.springframework.boot.actuate.autoconfigure.ManagementServerProperties$Security 二.切换SpringBoot版本为2.x 使用IDE的搜索功能 找到类ManagementServerProperties,发现Securi

  • vant中field组件label属性两端对齐问题及解决

    vant中field组件label属性两端对齐问题及解决

    目录 field组件label属性两端对齐问题 先看看原来的四种效果 label左对齐 看看官方文档 另一种解决思路 vant输入框label两端对齐 field组件label属性两端对齐问题 最近在开发一个移动端的Web应用,使用vant构建移动端的页面,在构建表单时,使用Field组件作为信息输入和展示,但是但是由于对于label属性只提供了left.center.right的对齐方式,个人觉得不是很美观,希望能够显示两端对齐的效果. 先看看原来的四种效果 label左对齐 label居中对

  • js中的onchange和onpropertychange (onchange无效的解决方法)

    笔者注:今天我在用到onchange事件时没有任何反应,最后翻查资料才知道Onchange的局限性和不稳定性.而onpropertychange却能很好的实现尤其是它的实时捕捉性能更是很值得用一下(幸亏有这个性能,做出的东西老板娘很满意 o(∩_∩)o...). 本人也比较懒,自己做的东西也懒的整理下来只能把搜索到的资料原版拿来个大家分享一下: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来捕获.例如一个 <input name="text1&qu

  • vue中element组件样式修改无效的解决方法

    如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st

  • 在vant 中使用cell组件 定义图标该图片和位置操作

    @本来想直接使用icon组件,使用阿里的图标库,可是怎么弄也不行,折腾一下午,最后决定使用最笨的办法,直接上代码 vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样 <div> <van-cell-group class="vanCellGroupClass"><!--../../assets/tou.png--> <!--<van-cell icon="" title="二级经营单位&quo

  • element组件中自定义组件的样式不生效问题(vue scoped scss无效)

    目录 element组件中自定义组件的样式不生效 解决方法 Element-UI修改样式不影响其他组件 需求描述 方法 element组件中自定义组件的样式不生效 当我们在项目中需要给element组件加上一些自定义样式的时候,往往是不生效的. 这是因为Vue项目中使用第三方框架的时候,Vue中有scoped,声明了样式是在组件范围内生效的,避免了不同组件的样式污染. 解决方法 1. 去掉scoped 这种方法确实可以实现效果,简单粗暴,却会造成不同组件样式污染,不建议. 2. 使用 /deep

随机推荐