vant 使用PullRefresh 下拉刷新组件时，无论滚动条在哪，总会触发下拉滚动

最新推荐文章于 2024-09-06 10:16:32 发布
最新推荐文章于 2024-09-06 10:16:32 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： 记录 文章标签： javascript 前端
原文链接：https://blog.csdn.net/u010613970/article/details/109548807
版权
遇到PullRefresh组件在滚动条未到顶部时就触发下拉刷新的bug，通过设置CSS样式解决了此问题。主要修改了.van-pull-refresh和.van-list的样式，增加了height和overflow属性，确保只有滚动到底部时才触发下拉刷新。这是一个关于前端开发中Vue组件调整的记录。
摘要由CSDN通过智能技术生成

今天遇到个问题，使用PullRefresh组件时，无论滚动条滚动到哪里，只要页面向下拉，页面的滚动条都还没到顶就触发下拉刷新
在网上找了一下，可终于找到方法了。

.van-pull-refresh { 
	height: calc(100vh - 100px) !important;
 	overflow: auto !important;
} 
.van-list { height: auto !important; }

今天也是遇到同样的问题了，记录一下。
原文链接

Delete_89x
关注
专栏目录
vant实现下拉刷新和上拉加载_解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)...
weixin_39944233的博客
12-20 1995
1. 页面在手机端不能上下滑动，在PC端浏览器正常滑动说明：在设置了overflow:auto;属性的前提下，H5页面在PC端浏览器里展示可以上下滑动，在ios上可正常滑动，在安卓手机 上不能上下滑动；这现象并不是ios和安卓兼容性问题！原因：设置了touch-action: none;这属性为局部或者全局属性，将这条属性注释即可正常滑动。2.使用PullRefresh和List列表实现下拉刷新和...
vant 组件【PullRefresh 下拉刷新】页面没划到最顶部依然触发刷新
nanfang_yinan的博客
02-22 6424
vant 组件【PullRefresh 下拉刷新】页面没划到最顶部依然触发刷新，导致bug【没划到顶部触发刷新使得页面顶部的部分在刷新后消失了】 解决办法： 第一步：在需要刷新的div设置class <van-pull-refresh v-model="isLoading" :disabled="isRefresh" :head-height="140" @refresh="onRefresh"> <div class="xun-geng-scroll" 第二步
van-pull-refresh 滚动条不在最顶端时下拉也会刷新
weixin_44163210的博客
12-05 2433
解决办法：在样式中写下方代码即可解决 .van-pull-refresh { height: calc(100vh - 100px) !important; overflow: auto !important; }
vue3.0使用van-pull-refresh，与页面滚动事件冲突，滚动数据，会触发刷新
xixi的博客
07-20 1470
遇到的问题：vue3.0使用van-pull-refresh，与页面滚动事件冲突，滚动数据，会触发刷新。1.van-pull-refresh加上disabled，限制它是否可以滚动。2.添加事件监听滚动，获取滚动距离，设置disabled。
vant 使用PullRefresh下拉刷新 + list列表组件时，无论滚动条在哪，下拉时总会触发下拉刷新
最新发布
H524268015wsw的博客
09-06 572
vant 使用PullRefresh下拉刷新 + list列表组件时，无论滚动条在哪，下拉时总会触发下拉刷新
在使用Vant组件库时，实现下拉刷新，只有在列表顶部才会刷新
qq_54334713的博客
08-31 694
本文提供了，如何实现下拉刷新，只有在列表顶部才会刷新
bug 下拉就触发刷新而不是下拉到顶部触发.zip
12-02
bug 下拉就触发刷新而不是下拉到顶部触发 文章链接https://mp.csdn.net/mdeditor/98948351#
Vant-ui 移动端下拉刷新
weixin_52540065的博客
02-08 1464
下拉刷新
Android PullToRefreshScrollview+Listview 刷新界面的时候滚动到顶部
02-04 1642
使用下拉刷新的第三方库com.handmark.pulltorefresh.library.PullToRefreshScrollView，里面嵌入一个ListView，为了解决滑动问题，更新ListView数据之后，重新计算了高度，刷新页面，导致整体页面默认滚动到底部，在某些业务中，需要让整个PullToRefreshScrollview页面滚动到顶部，需要这么做： 本质上，PullToRef
经典的上拉加载下拉刷新的项目
06-02
这是一个经典的上拉加载狭隘了刷新项目，上拉下拉的风风格是一样的，上拉下拉的风格可以自定义，包含listview，textView，imageView以及通用的PullableNestScrollView上拉加载，下拉刷新。
【JavaScript源代码】vant list组件滚动保留滚动条位置.docx
12-30
在某些场景下，比如在页面之间切换时，我们希望用户在返回之前浏览的位置时，列表能够保持原来的滚动条位置，即实现滚动条位置的保留。这通常需要配合Vue的`keep-alive`组件来实现页面的缓存。 首先，`keep-alive`...
Vant—下拉刷新上拉加载
Poppy_LYT的博客
08-12 7126
Vant—下拉刷新上拉加载 第一步： 布局 <template> <div> <van-pull-refresh v-model="isLoading" @refresh="onRefresh" > <van-list v-model="isUpLoading" :fi...
PullToRefresh下拉刷新，上拉分页，返回顶部
iblade的博客
03-22 5082
一、概述：PullToRefresh是封装好的上拉分页和下拉刷新库，它支持： ListView，ExpandableListView，GridView，WebView，ScrollView，HorizontalScrollView，ViewPager二、准备工作：2.0、Library下载地址：https://github.com/chrisbanes/Android-PullToRefresh
分享一个vant-ui中下拉刷新的BUG
SnowBeatRain的博客
05-23 3981
分享一个vant-ui的bug 场景：在我自己手机上（iphone 6s 10.3.1）实现的下拉刷新无效，其他手机(包含6s)和电脑均可以，（脚手架使用的vuecli3.0 脚手架中vue的版本为：vue@2.6.10） 处理结果：将vue@2.6.10改为@2.5.22解决 官方issues：https://github.com/youzan/vant/issues/3015 ...
vant下拉加载+动态查询
weixin_46463643的博客
08-11 567
效果图 <Search v-model="searchValue" placeholder="输入需要查询的信息名称" @search="onSearch" @input="onSearch" @clear="onSearch" /> <div class="table"> <List v-model="loading" :finished="finished" f
vant中下拉刷新和元素滚动下拉冲突问题解决
qq_57268984的博客
07-20 5254
vant中下拉刷新和元素滚动下拉冲突问题解决
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> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值