vant之van-list滑到底部不触发问题

最新推荐文章于 2024-04-02 18:11:29 发布
最新推荐文章于 2024-04-02 18:11:29 发布
阅读量818 收藏
点赞数
文章标签： 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxyaq0916/article/details/133673593
版权

  问题：在首次点击查询列表数据触底会触发pageNo++事件，在第二次点击查询列表时触底事件不执行。

原因：是在每一次点击查询列表时都需要将原有的loading参数与finished参数恢复默认值。如若未将finished恢复值，将会出现下拉时提示暂无更多数据。

赵兔儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
主要介绍了vue vantUI tab切换时 list组件不触发load事件的解决办法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
van-list 下拉刷新 触底分页 触底分页事件只加载一次
m0_59006402的博客
09-12 871
我是 头部是筛选的条件，，更换不同的状态，显示不同的列表数据，比如 审批中数据是 对的，触底分页也是对的，如果我切换一个状态的话，总共是 15条数据，但是 切换了状态只显示第一页的数据（我设置的是一页十条数据）loading 设置为false 是因为 加载过程中 也就是 loading 是true的时候，不触发load 事件。解决触底事件只监听一遍的方法： 就是给 切换搜索条件以及 下拉刷新函数加如下两行代码。这种写法 有的浏览器支持，有的浏览器不支持，一开始以为是 浏览器内核的原因。
使用vant 的List组件问题,List组件嵌套自己的列表组件，用来显示一个列表，通常情况是没问题的，但是当加上条件重新刷新组件的时候，会出现，重复的刷新两次，或者不刷新的问题，或者只显示一页
最新发布
qq_38389533的博客
04-02 193
使用vant 的List组件问题
Vant---触底加载
weixin_53111028的博客
11-05 2723
触底加载
vue -vantUI tab切换时 list组件不触发load事件解决办法
weixin_30580341的博客
06-13 1893
最近由于公司项目需要，用vue写了几个简单的页面。用到了vantUI List 列表 瀑布流滚动加载，用于控制长列表的展示 当列表即将滚动到底部时，会触发事件并加载更多列表项。 （页面加载完成后默认会自动加载一次，可以:immediate-check="false" 这样设置一下，页面加载完成后就不会自动加载一次了 ） 看上去一切都很美好；但是tab进行切换的时候，li...
vue vant-list 加载问题汇总
yeyazi001的博客
08-11 1643
vue vant-list 加载问题汇总
vant使用list时，@load 无法触发
m0_72663698的博客
10-13 1102
在list的父级样式添加 height: 100vh。使用list时，@load 无法触发。
vant list列表onload不触发原因及解决方法
撑起自己半边天
05-15 6281
vant list列表onload不触发原因及解决方法
Vant的List组件列表 滑动后不触底也发送请求的Bug
Itmei的博客
11-15 1465
Vant的List组件列表+PullRefresh 组件实现下拉刷新和List列表滑动屏幕到底部时发送请求效果。把van-list和van-pull-refresh添加成组件，由于改需求在许多页面都可以使用到,组件名称提取为，list是传递的商品集合，在通过插槽的显示由父页面来定义渲染的样式这个插槽是使用for把商品集合遍历，并且每个div一个商品我们可以使用把div转为行内块这样我们也可以完成需求，只要不出问题的方案就是好方案。
vant 中van-list的用法说明
01-18
van-list里面的元素不能有float样式，否则会连续触发 load 事件 原代码 <van v-model=active change=getTypeDate> <van v-for=(tab) title=tab.name key=tab.id> <div xss=removed class=pic-content> <...
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
主要介绍了解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vant 自定义 van-dropdown-item的用法
10-15
主要介绍了vant 自定义 van-dropdown-item的用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
＜van-list＞ ＜/van-list＞列表组件的使用
weixin_49577940的博客
11-12 7040
<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使用van-list不能上下滚动，滑动无效的解决？
m0_61663332的博客
01-13 3709
vant使用van-list不能上下滚动，vant组件的list不能上下滑动
vant-list onLoad触发问题以及tab切换不再触发问题
qq_41169990的博客
01-20 5898
首先 van-list 是首次进就会触发加载的，滚动条滑倒底部不会再触发 一般是因为外部高度未固定导致拿不到滚动条位置 <template> <div class="listClass" ref="listout"> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <div v-for=".
vant列表组件遇到的触底加载问题
weixin_45233925的博客
08-26 1325
vant
vant中list加载异常问题
qq_45208029的博客
05-13 1569
最近看list加载问题看了好久，也想了很多方法，最后自己又写了一个小demo，你们可以试一下 <template> <div class="home"> <van-tabs v-model="active" @change="change"> <van-tab title="标签 1"></van-tab> <van-tab title="标签 2"></van-tab> &l
vue3 + ts +vant 中的van-list如何实现滚动到底部加载下一页数据
05-19
要实现滚动到底部加载下一页数据，可以使用 `van-list` 中的 `@scroll.native` 事件来监听滚动事件，然后通过计算列表高度和滚动高度来判断是否滚动到了底部。 具体实现步骤如下： 1. 给 `van-list` 组件添加 `ref` 属性，用于获取组件实例。 ```html <van-list ref="list" :finished="isFinished" :loading="isLoading" @load="onLoad"> ... </van-list> ``` 2. 在 `mounted` 钩子函数中，获取 `van-list` 组件实例，并给 `window` 对象添加 `scroll` 事件监听器。 ```typescript import { defineComponent, onMounted, ref } from 'vue'; import { List } from 'vant'; export default defineComponent({ components: { VanList }, setup() { const listRef = ref(null); onMounted(() => { const listInstance = listRef.value.$el; window.addEventListener('scroll', () => { const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; if (scrollTop + clientHeight >= scrollHeight && listInstance.offsetHeight) { // 滚动到底部，触发加载更多 } }); }); return { listRef, }; }, }); ``` 3. 在 `@load` 事件中，将 `isFinished` 和 `isLoading` 属性设置为 `true` 和 `false`，表示数据已经加载完成或正在加载中。 ```typescript export default defineComponent({ components: { VanList }, setup() { const listRef = ref(null); const isFinished = ref(false); const isLoading = ref(false); const onLoad = () => { if (!isFinished.value && !isLoading.value) { isLoading.value = true; // 发送网络请求，获取下一页数据 // 请求成功后，将 isLoading 设置为 false，表示加载完成 } }; onMounted(() => { const listInstance = listRef.value.$el; window.addEventListener('scroll', () => { const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; if (scrollTop + clientHeight >= scrollHeight && listInstance.offsetHeight) { onLoad(); } }); }); return { listRef, isFinished, isLoading, onLoad, }; }, }); ``` 这样，当滚动到底部时，就会触发 `onLoad` 方法，从而加载下一页数据。需要注意的是，在数据全部加载完成后，需要将 `isFinished` 设置为 `true`，以防止重复加载数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值