vant 中的SwipeCell踩坑 onLoad 不触发的问题 List 列表 上拉加载

最新推荐文章于 2025-04-16 09:51:31 发布
最新推荐文章于 2025-04-16 09:51:31 发布
阅读量7.7k 收藏 3
点赞数 1
分类专栏： H5移动端 文章标签： 上拉加载 Vant
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/baidu_39040364/article/details/89849985
版权

最近我咋做H5移动端的时候，用了一个新的框架 vant 在使用后感觉还是可以的 但是我在做分页加载的时候遇到一个坑 就是用到了框架中是上拉加载 《 List 列表 》

问题复现

   <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
			<van-cell v-for="item in list" :key="item" :title="item" />
	</van-list>

根据文档提示 在内容会触发在到达底部的时候会触发 onLoad 在这里插入图片描述
需要注意的是这句话 触发onLoad的时候回将loading设置成true 《但是你没告诉我onLoad这玩意你上来就触发啊》

所以导致就是我们的onLoad 当页面明明滑到底了就是不触发

这时loading是=true的 所以不会去触发onLoad

解决办法

        在我的们的 onLoad  事件中加上  ‘ this.loading = false’

在这里插入图片描述

这时就会触发onLoad 了

vant-ui框架 tab切换list不加载问题（切换后onload不触发）
Wangdr的博客
05-09 7752
遇到的问题：项目里，加载的list，页面上有个切换的tab,实现切换不同的类型，加载不同的list的功能。vant-ui的list就有个bug，当切换tab的时候，它的onload没方法自动触发。然而在当前标签页，如果列表已经加载完毕再去切换，onload就可以实现自动触发 解决办法： tab(i,en){ this.num=i; this.type=en; this.evaluate_list=[];//清空list列表 this.noData=false;//展示列表
vant有上拉加载吗_使用vant list 上拉加载，在页面进入的时候就是不触发unload事件，求救...
weixin_30418225的博客
12-29 1324
1-在使用vant 的lise 上拉加载的时候，页面进入不触发unload事件2-上拉加载的父盒子没有设置高度3- html结构如下 {{ item.shortname}}{{ item.name}}4- js数据data数据loading: false,finished: false,methods函数onLoad () {var that = thissetTimeout((...
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不触发原因及解决方法
撑起自己半边天
05-15 9949
vant list列表onload不触发原因及解决方法
Vant 封装下拉刷新和上拉加载更多
最新发布
qq_24882601的博客
04-16 156
话不多说，直接上代码。
＜van-list＞ ＜/van-list＞列表组件的使用
weixin_49577940的博客
11-12 7619
<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.
vue + vant 之 List列表组件 首次不触发 onLoad 事件
weixin_47409897的博客
04-18 3337
目录vue + vant 之 List列表组件 首次不触发 onLoad 事件 vue + vant 之 List列表组件 首次不触发 onLoad 事件 immediate-check设置为flase即可 <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="loading" :finished="finished" finished-text="没有
vant使用list时，@load 无法触发
m0_72663698的博客
10-13 1986
在list的父级样式添加 height: 100vh。使用list时，@load 无法触发。
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
在使用Vue进行开发过程中，尤其是在集成VantUI组件库构建移动端应用时，开发人员可能会遇到一些组件交互上的问题。本文针对VantUI的Tab切换时List组件不触发load事件的问题进行讨论，并提出了具体的解决方案。 首先...
vant list列表 onload不触发
12-10
在使用Vant UI框架的List组件时，如果遇到onload事件不触发的情况，可能有以下几个原因和解决方法： 1. **数据源未正确配置**：确保你的数据源配置正确，并且数据源有足够的数据来触发加载更多的事件。 2. **加载...
vant之van-list滑到底部不触发问题
zxyaq0916的博客
10-08 1821
vant之van-list滑到底部不触发问题
使用vantui 实现移动端无线滚动分页功能 滚动到底部但没有触发onload事件的问题。
weixin_44475487的博客
08-16 2890
使用vantui 实现移动端无线滚动分页功能 滚动到底部但没有触发onload事件的问题。 近期借到公司一个项目pc端已经有了 要改一套移动端页面出来 采用了vant ui 进行改造，页面样式改完以后 到实现分页时，想用无限滚动实现分页时出现了问题，onLoad事件 只触发了一次，后面再滚动到底事件无法触发，但是移动端用分页的话感觉不太好看 所以找这个Bug 找了很久。 页面初步改造 样式大概张这样： 此时vant 的list组件已经套上 但是onload事件始终无法触发 通过其他相关博客得知 父级别标
Vant2框架tab切换list不加载问题（切换后onload不继续触发）
Mr.小灰狼_随笔
07-31 872
Vant2框架tab切换list不加载问题（切换后onload不继续触发） 遇到的问题： van-list 加载，页面上有个切换的 van-tab，实现切换不同的类型，加载不同的list的功能。 Vant2 的 List 列表 就有个 bug，当切换 tab 的时候，它的 onload 没有自动触发。 然而在当前标签页，如果列表已经加载完毕再去切换，onload 就可以实现自动触发
vant-list onload在切换 tab 或者 搜索 不会触发的坑
weixin_44441196的博客
06-01 2558
vant-list onload在切换 tab 或者 搜索 不会触发的坑 首先要知道onload是根据loading和finished的状态来判定onload函数是否执行，如果我们将loading的初始状态设置为false,在页面加载的时候就会触发onload事件，所以将它设置为true。 loading: true, 我们请求的接口函数放在onload里面，由于我们设置了loading: true，触底就不会刷新了。我们通过自己去调用它来触发 //每次切换tab、者搜索、或者初始化 都调用它 this.
vant list组件使用的坑
qq_41691865的博客
03-03 484
1.解决请求两次数据重复 把finish的初始值设置为true,然后添加 immediate-check=true 2.如何判断finish为true的情况 一般看网络请求返回的是code是否为错误码
vant组件库的SwipeCell组件无法拖动，无法滑动，无样式等问题
xiaobuzq的博客
01-20 1958
如果发现组件没有样式的话，在上方导入对应的样式就可以了，这里导入的是SwipeCell组件样式，同理，发现哪个组件没样式就导入哪个组件的样式就可以了。使用了vant组件库的SwipeCell组件发现无法滑动，如何把浏览器切换成移动端是可以滑动组件的。查阅了资料，发现是pc端和移动的监听事件是不同的，需要下载一个插件才能在pc端使用。打开终端进行安装，我使用的是pnpm包管理工具，按自己使用的包管理工具来安装。然后在pc端就可以拖动和滑动了，这个组件在pc端有点难拖动，多试几次就好了。
van-list 如何结合 van-swipe使用
weixin_42600407的博客
02-15 549
van-list和van-swipe都是在Vue.js框架下的组件，它们可以结合使用来实现更好的用户体验。 van-list组件可以显示一组列表，而van-swipe组件可以支持左右滑动事件。通过将这两个组件结合使用，可以实现一个左右滑动切换不同列表项的功能。 具体实现方法如下： 首先，在页面上引入van-list和van-swipe组件。 在van-list组件中设置ref属性，以便在后面的...
vant-list onLoad触发问题以及tab切换不再触发问题
qq_41169990的博客
01-20 6394
首先 van-list 是首次进就会触发加载的，滚动条滑倒底部不会再触发 一般是因为外部高度未固定导致拿不到滚动条位置 <template> <div class="listClass" ref="listout"> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <div v-for=".
h5的vue项目vantUI--tab切换或者筛选条件时上拉加载不触发上拉load事件
qq_41621896的博客
03-02 2278
最近利用vue和vantUI写h5的项目，遇到的问题总结： 问题：vantUI–tab切换或者筛选条件时上拉加载不触发上拉load事件 loading为false是加载中，finished为true是已结束状态，onLoad是执行函数（分页添加list的值） 这是我的页面 created () { this.getDataList('COMPREHENSIVE', 0) //记得第一次...
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> ``` 如果以上方法都没有解决问题，你可以尝试检查控制台输出，查看是否有相关的错误信息。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值