vue + vant 之 List列表组件 首次不触发 onLoad 事件

最新推荐文章于 2024-07-11 16:13:04 发布
最新推荐文章于 2024-07-11 16:13:04 发布
阅读量3k 收藏 2
点赞数 1
分类专栏： vue + vant 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47409897/article/details/124254654
版权
本文介绍了在Vue+Vant框架中，List列表组件首次加载时不触发onLoad事件的问题。通过设置`immediate-check`属性为`false`，可以避免这个问题。只需在`created`或`mounted`钩子中请求数据即可正常加载列表。
摘要由CSDN通过智能技术生成

目录

vue + vant 之 List列表组件 首次不触发 onLoad 事件

  • immediate-check设置为flase即可
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    :immediate-check="false"
  >
    <van-cell v-for="item in list" :key="item" :title="item" />
  </van-list>
</van-pull-refresh>
  • 之后要获取list列表数据，直接再created或者mounted之中请求即可！
小小liang
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vant-ui框架的一个bug(解决切换后onload不触发)
01-22
前几天做的项目里有用到下拉刷新。使用了vant-ui里的 List 列表 瀑布流滚动加载，用于控制长列表的展示 先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法。（我使用了第三种，全局引入方法） 方式一. 使用 babel-plugin-import (推荐) babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装 babel-plugin-import 插件 npm i babel-plugin-import -D // .babelrc 中配置 //
vant-list onLoad触发问题以及tab切换不再触发问题
qq_41169990的博客
01-20 6050
首先 van-list 是首次进就会触发加载的，滚动条滑倒底部不会再触发 一般是因为外部高度未固定导致拿不到滚动条位置 <template> <div class="listClass" ref="listout"> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <div v-for=".
vue3中实现页面onload和onshow
最新发布
siennagesen的博客
07-11 959
vue3中实现页面onload（onMounted）和onshow（watch监听页面路径变化，前后相同即为onshow）
vue vant-list 加载问题汇总
yeyazi001的博客
08-11 2232
vue vant-list 加载问题汇总
vant list列表onload不触发原因及解决方法
撑起自己半边天
05-15 7327
vant list列表onload不触发原因及解决方法
h5的vue项目vantUI--tab切换或者筛选条件时上拉加载不触发上拉load事件
qq_41621896的博客
03-02 2197
最近利用vue和vantUI写h5的项目，遇到的问题总结： 问题：vantUI–tab切换或者筛选条件时上拉加载不触发上拉load事件 loading为false是加载中，finished为true是已结束状态，onLoad是执行函数（分页添加list的值） 这是我的页面 created () { this.getDataList('COMPREHENSIVE', 0) //记得第一次...
vant使用list时，@load 无法触发
m0_72663698的博客
10-13 1377
在list的父级样式添加 height: 100vh。使用list时，@load 无法触发。
vue vant中list首次加载不满一屏会请求两次数据重复（已解决）
明明的博客
12-10 3868
首先把finished 默认为true 然后添加 immediate-check=true <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="true"> </van-list>
vue vant-list 加载问题（重复加载，首次加载，不加载，通页面多个下拉加载问题）
热门推荐
qq_17627195的博客
11-04 1万+
主要需要注意以下几点 是否正确设置this.loading=false;。 （因为每次加载函数执行的时候，this.loading 会自动变为 true， 如果不设置为 false 则不会继续加载）。 需要给van-list增加 :immediate-check=“false” 属性，不要让他首次加载，然后在 created() {} 里面进行首次加载（这样可以放置首次加载出现多次加载的情况） 异步获取到数据后，需要给在元数据的基础上增加数据，可以参考后面的例子代码，注意，要使用 setTimeout((
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
总结来说，当我们在使用Vue结合VantUI开发具有Tab切换功能的页面时，可能会遇到List组件在非首Tab页触底时load事件不触发的问题。原因在于List组件的内部状态没有在Tab切换时得到重置。通过在Tab切换事件中添加对...
Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui）.zip
05-03
Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：...
2021-基于Vue+Vant+SSM图书管理系统设计.zip
03-06
【标题】"2021-基于Vue+Vant+SSM图书管理系统设计.zip" 提供了一个关于2021年开发的图书管理系统的源码示例，它结合了前端的Vue.js框架、Vant UI组件库以及后端的Spring、SpringMVC和MyBatis（简称SSM）三大框架。...
vue+vant 移动端国际区号组件封装
06-19
json数据
移动端vant 弹框中包含tab页，记第一个tab,不加载数据问题
weixin_55895406的博客
09-09 1518
vant tab
＜van-list＞ ＜/van-list＞列表组件的使用
weixin_49577940的博客
11-12 7286
<template> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <van-cell v-for="(item, index) in list" :key="index"> {{item}}} </van-cell> </van-list> </template> &l.
处理vant list使用报错的点
weixin_48687415的博客
12-23 3314
1.使用vant-list在滚动条触底的时候，没有触发onLoad事件 可能是因为在van-list父元素的地方设置了父元素高度为100%，这里不能这样设置， 还有就是可能对需要遍历的数据，在每一次触底时，都进行了初始化 2.有时候在tab标签切换后，滚动条不再触发onLoad事件 解决方法是，在切换标签函数后，加上 this.loading=true this.finished =false 3.下拉刷新时，数据一直在加载中， 这是因为少写了，this.refreshing = false; 有时候把这条
解决vant中上拉加载请求多次问题
m0_50278775的博客
03-27 6669
使用van-pull-refresh和van-list实现上拉加载和下拉刷新效果
vant有上拉加载吗_使用vant list 上拉加载，在页面进入的时候就是不触发unload事件，求救...
weixin_30418225的博客
12-29 1281
1-在使用vant 的lise 上拉加载的时候，页面进入不触发unload事件2-上拉加载的父盒子没有设置高度3- html结构如下 {{ item.shortname}}{{ item.name}}4- js数据data数据loading: false,finished: false,methods函数onLoad () {var that = thissetTimeout((...
vue3 vant list 组件 不触发上拉加载 和 onload事件
06-03
如果vue3 vant list 组件不触发上拉加载和onLoad事件，可能是以下原因： 1. 没有设置List组件的高度属性。 在List组件中，必须设置height属性，否则无法触发上拉加载功能。你可以设置一个固定的高度或者一个动态计算的高度，例如： ``` <van-list :height="500" @load="onLoad"></van-list> ``` 2. 没有设置List组件的loading属性。 loading属性是用来控制上拉加载的状态的，如果没有设置loading属性，上拉加载功能将无法正常工作。你可以在setup中定义一个ref变量来控制loading属性，例如： ``` <template> <van-list :height="500" :loading="loading" @load="onLoad"></van-list> </template> <script> import { ref } from 'vue'; export default { setup() { const loading = ref(false); const onLoad = () => { loading.value = true; // ... }; return { loading, onLoad, }; }, }; </script> ``` 3. 没有在List组件上绑定@load事件。 上拉加载的触发需要依赖@load事件，如果没有在List组件上绑定该事件，上拉加载功能将无法正常工作。你可以在List组件上绑定一个方法，例如： ``` <template> <van-list :height="500" :loading="loading" @load="onLoad"></van-list> </template> <script> import { ref } from 'vue'; export default { setup() { const loading = ref(false); const onLoad = () => { loading.value = true; // ... }; return { loading, onLoad, }; }, }; </script> ``` 如果以上方法都没有解决问题，你可以尝试检查控制台输出，查看是否有相关的错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值