vant 组件【PullRefresh 下拉刷新】页面没划到最顶部依然触发刷新

最新推荐文章于 2024-06-28 07:30:00 发布
最新推荐文章于 2024-06-28 07:30:00 发布
阅读量6.2k 收藏 5
点赞数 1
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nanfang_yinan/article/details/123073027
版权
在使用Vant组件PullRefresh时遇到一个问题，当页面未滑动到顶部时，下拉刷新功能仍然被触发，导致页面顶部内容丢失。为解决此bug，可以在需要刷新的div上添加特定class，并在onRefresh方法中加入确保滚动条回到顶部的代码，通过这种方式可以避免未达到顶部就触发刷新的情况，亲测有效。
摘要由CSDN通过智能技术生成

vant 组件【PullRefresh 下拉刷新】页面没划到最顶部依然触发刷新，导致bug【没划到顶部触发刷新使得页面顶部的部分在刷新后消失了】

解决办法：
第一步：在需要刷新的div设置class
在这里插入图片描述

<van-pull-refresh v-model="isLoading" :disabled="isRefresh" :h
最低0.47元/天 解锁文章
灰色小漂亮
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vant—下拉刷新上拉加载
Poppy_LYT的博客
08-12 7102
Vant—下拉刷新上拉加载 第一步： 布局 <template> <div> <van-pull-refresh v-model="isLoading" @refresh="onRefresh" > <van-list v-model="isUpLoading" :fi...
van-pull-refresh 滚动条不在最顶端时下拉也会刷新
weixin_44163210的博客
12-05 2302
解决办法：在样式中写下方代码即可解决 .van-pull-refresh { height: calc(100vh - 100px) !important; overflow: auto !important; }
在使用Vant组件库时，实现下拉刷新，只有在列表顶部才会刷新
qq_54334713的博客
08-31 634
本文提供了，如何实现下拉刷新，只有在列表顶部才会刷新
vue3.0 + vant实现下拉刷新上拉加载
chengcheng9876的博客
06-28 1172
vue3.0 + vant实现下拉刷新上拉加载 @load事件不生效，在滚动的过程中，onLoad事件没有任何反应
vant 使用PullRefresh 下拉刷新组件时，无论滚动条在哪，总会触发下拉滚动
u010613970的博客
11-07 3202
今天遇到个问题，使用PullRefresh组件时，无论滚动条滚动到哪里，只要页面向下拉，页面的滚动条都还没到顶就触发下拉刷新 在网上找了一下，可终于找到方法了 .van-pull-refresh { height: calc(100vh - 100px) !important; overflow: auto !important; } .van-list { height: auto !important; } 这样就可以实现解决问题了 ...
uniapp使用onPullDownRefresh实现页面下拉刷新
Shivy_的博客
11-18 2986
介绍 在 uniapp 中使用 onPullDownRefresh实现页面下拉刷新的步骤如下： 在js中定义onPullDownRefresh 处理函数,该函数和date，onLoad等生命周期函数同级，主要用于监听该页面用户下拉刷新事件。 找到配置文件 pages.json并打开，然后在需要添加下拉刷新事件的页面文件中，打开enablePullDownRefresh 当完成刷新数据操作后，在 onPullDownRefresh 里 添加 uni.stopPullDownRefresh来停止当前页面的下拉
【微信小程序】单页面设置enablePullDownRefresh：true 不生效
weixin_40874076的博客
05-31 422
页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json window 中相同的配置项。页面的.json只能设置window相关的配置项，以决定本页面的窗口表现，所以无需写window这个键”app.json中在window对象中设置,然而在页面的配置中,不需要window,悲剧的是怎么都不生效,然后我在app.json中同样设置,惊奇的是竟然生效了,那么到底哪里不对呢…今天在写下拉刷新功能,然后看了官方文档。
bug 下拉就触发刷新而不是下拉到顶部触发.zip
12-02
标题所提到的"bug 下拉就触发刷新而不是下拉到顶部触发"是指一个常见的滚动刷新问题，这通常发生在使用了下拉刷新功能的移动应用或网页上。当用户尝试滚动页面时，如果下拉动作过早地触发了刷新功能，而不是等到用户...
vant实现下拉刷新和上拉加载_解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)...
weixin_39863631的博客
12-20 1522
1. 页面在手机端不能上下滑动，在PC端浏览器正常滑动说明：在设置了overflow:auto;属性的前提下，H5页面在PC端浏览器里展示可以上下滑动，在ios上可正常滑动，在安卓手机 上不能上下滑动；这现象并不是ios和安卓兼容性问题！原因：设置了touch-action: none;这属性为局部或者全局属性，将这条属性注释即可正常滑动。2.使用PullRefresh和List列表实现下拉刷新和...
pull refresh
05-16
转载的pull refresh
十分钟教你用vant实现下拉刷新上拉加载
热门推荐
诗雨远方的博客
06-27 4万+
十分钟教你用vant实现下拉刷新上拉加载 vant是有赞团队推出的基于vue一套移动端小程序UI框架，不写小程序我也用了下，还是很不错的，刚好今天要做一个移动端上拉刷新下拉加载功能，去网上看的例子当中，没有一个是尼玛能用的，我下面贴出的代码，亲测可用。 选择了上班，以为自己没有了梦想，当孤独来临的时候，如果专...
vant中下拉刷新和元素滚动下拉冲突问题解决
qq_57268984的博客
07-20 5046
vant中下拉刷新和元素滚动下拉冲突问题解决
van-list上划刷新问题
xiaobai_qihang的博客
12-27 317
vue+vant 上滑加载数据
van-pull-refresh和van-list配合使用时出现的问题以及解决方案
HDdgut的博客
07-12 3339
问题：van-pull-refresh和van-list配合使用 ，实现上拉加载，下拉刷新功能，van-list 上拉加载之后，下拉滑动数据时，触发van-pull-refresh的下拉刷新，没有滑动数据到底部，再触发下拉刷新 解决：van-pull-refresh 要放到可以固定高度且可以滑动的div中 ...
微信小程序scroll-view组件之上拉加载下拉刷新（解决上拉加载不触发）
学如逆水行舟，不进则退！
07-12 7648
最近在学习微信小程序，有一个功能就是做一个商品列表分页限流然后实现上拉加载下拉刷新功能，遇到了一个使用scroll-viwe组件下拉刷新事件始终不触发问题，网上很多说给scroll-view设置一个高度啥的就可以解决，有些人设置了高度也不触发，所以在下就研究了一波这个scroll-view的触发机制。
Vue3 + Vant4 ·PullRefresh下拉刷新与 list列表触底加载下一页
qq_51463650的博客
02-22 1598
实际项目中的运用。Vue3 + Vant4·PullRefresh下拉刷新与 list列表触底加载下一页
mui.pullrefresh.js使用详解
孤云博客
11-27 1万+
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。 最近在一个项目中有用到下拉刷新和上拉加载更多的功能，选择了mui框架，研究了下，使用起来还是蛮简单的，不过也遇到一些坑，这里把最终整理出来的分享下，大多数 H5 框架都是通过 DIV 模拟下拉回弹动画，在低端 an...
vue vant下拉刷新 强制刷新页面
最新发布
08-01
在Vue Vant框架中，下拉刷新通常是指使用Vant组件库中的`van-refresh`组件实现的上拉加载更多功能。如果需要强制刷新整个页面而不是仅仅触发数据更新，你可以在用户触发下拉刷新后手动操作页面路由或者执行全局的刷新逻辑。 下面是一个基本的例子： 1. 首先，在你的页面模板中引入并使用`<van-refresh>`组件： ```html <template> <div> <van-refresh v-model="refreshing" @refresh="onRefresh"></van-refresh> <!-- 其他内容 --> </div> </template> ``` 2. 然后在script部分设置状态和方法： ```javascript <script> export default { data() { return { refreshing: false, }; }, methods: { onRefresh() { this.refreshing = true; // 设置下拉刷新的状态为正在进行 // 这里可以模拟异步请求，替换为实际刷新逻辑 setTimeout(() => { this.$router.push({ name: 'your-page-name' }); // 使用路由跳转刷新页面 // 或者直接调用 Vue 实例的 refresh 方法 // this.$forceUpdate(); // 如果你想在当前页面局部刷新 this.refreshing = false; // 刷新完成后设置为完成状态 }, 2000); // 模拟延迟，实际情况应替换为你真实的刷新时间 }, }, }; </script> ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值