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

最新推荐文章于 2024-11-06 07:52:10 发布

diCommon

最新推荐文章于 2024-11-06 07:52:10 发布

阅读量3.3k

点赞数 7

分类专栏： css vant

本文链接：https://blog.csdn.net/u010613970/article/details/109548807

版权

css 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

vant

2 篇文章 0 订阅

订阅专栏

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

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

这样就可以实现解决问题了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

diCommon

关注关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
5
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vant实现下拉刷新和上拉加载_解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)...

weixin_39944233的博客

12-20

2050

1. 页面在手机端不能上下滑动，在PC端浏览器正常滑动说明：在设置了overflow:auto;属性的前提下，H5页面在PC端浏览器里展示可以上下滑动，在ios上可正常滑动，在安卓手机上不能上下滑动；这现象并不是ios和安卓兼容性问题！原因：设置了touch-action: none;这属性为局部或者全局属性，将这条属性注释即可正常滑动。2.使用PullRefresh和List列表实现下拉刷新和...

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

nanfang_yinan的博客

02-22

6555

vant 组件【PullRefresh 下拉刷新】页面没划到最顶部依然触发刷新，导致bug【没划到顶部触发刷新使得页面顶部的部分在刷新后消失了】解决办法：第一步：在需要刷新的div设置class <van-pull-refresh v-model="isLoading" :disabled="isRefresh" :head-height="140" @refresh="onRefresh"> <div class="xun-geng-scroll" 第二步

5 条评论您还未登录，请先登录后发表或查看评论

van-pull-refresh下拉刷新与局部滚动条冲突

Julia_0502的博客

05-05

3519

van-pull-refresh下拉刷新与局部滚动条冲突

PullToRefresh 项目常见问题解决方案

最新发布

gitblog_00535的博客

11-06

831

PullToRefresh 项目常见问题解决方案 PullToRefresh 根据Maxwin的XListView改造而来，完善下拉刷新上拉加载更多的功能并实现自动刷新以及自动加载等功能，并增加对ScrollView的支持。原XListView参考链接：https://github.com/Maxwin-z/XLis...

van-pull-refresh 滚动条不在最顶端时下拉也会刷新

weixin_44163210的博客

12-05

2538

解决办法：在样式中写下方代码即可解决 .van-pull-refresh { height: calc(100vh - 100px) !important; overflow: auto !important; }

vue3.0使用van-pull-refresh，与页面滚动事件冲突，滚动数据，会触发刷新

xixi的博客

07-20

1555

遇到的问题：vue3.0使用van-pull-refresh，与页面滚动事件冲突，滚动数据，会触发刷新。1.van-pull-refresh加上disabled，限制它是否可以滚动。2.添加事件监听滚动，获取滚动距离，设置disabled。

vant滚动条下滑与下拉刷新冲突

时光有伱，记忆成花~

01-31

752

vant中下拉查看数据的时候，与vant的下拉刷新的组件冲突。

【JavaScript源代码】vant list组件滚动保留滚动条位置.docx

12-30

在某些场景下，比如在页面之间切换时，我们希望用户在返回之前浏览的位置时，列表能够保持原来的滚动条位置，即实现滚动条位置的保留。这通常需要配合Vue的`keep-alive`组件来实现页面的缓存。首先，`keep-alive`...

Vant—下拉刷新上拉加载

Poppy_LYT的博客

08-12

7139

Vant—下拉刷新上拉加载第一步：布局 <template> <div> <van-pull-refresh v-model="isLoading" @refresh="onRefresh" > <van-list v-model="isUpLoading" :fi...

bug 下拉就触发刷新而不是下拉到顶部触发.zip

12-02

bug 下拉就触发刷新而不是下拉到顶部触发文章链接https://mp.csdn.net/mdeditor/98948351#

vant-ui 下拉刷新组件和滚动冲突

CSDN_Sviexu的博客

12-31

1675

问题描述: 在使用vant-ui的下拉刷新和滚动加载组件时, 上下滑动屏幕时, 发现向下滑动总是触发下拉刷新( ios没有问题 ) 解决过程: 搜索了相关问题, 有的是在滚动内容上加@touchmove.stop 属性, 有的是改写<van-pull-refresh>组件样式. 尝试之后问题未解决. 于是重新整理了一遍样式,统一用flex布局, 然后将<van-pull-refresh>组件单独放在一个固定高度的容器内,并且给父容器添加overflow:hidden属性;再在

vant滚动条下滑与下拉刷新冲突问题

qq_42628798的博客

07-24

3143

问题描述：在往下拨动数据进行查看起始数据的时候，往往与vant的下拉刷新的组件冲突，本来是想往下滑动滚动条查看数据，结果老是触发下拉刷新。解决方案：在数据内容的div中添加**@touchmove.stop**属性 <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <div v-for="item in tableData" :key="item.ID" @touchmove.stop> ...

vant中下拉刷新和元素滚动下拉冲突问题解决

qq_57268984的博客

07-20

5495

vant中下拉刷新和元素滚动下拉冲突问题解决

在使用Vant组件库时，实现下拉刷新，只有在列表顶部才会刷新

qq_54334713的博客

08-31

723

本文提供了，如何实现下拉刷新，只有在列表顶部才会刷新

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

H524268015wsw的博客

09-06

858

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

vant PullRefresh和组件滚动事件冲突处理

海阔天空

06-07

1618

vant下拉刷新和组件滚动事件冲突问题解决

uniapp使用onPullDownRefresh实现页面下拉刷新

Shivy_的博客

11-18

3059

介绍在 uniapp 中使用 onPullDownRefresh实现页面下拉刷新的步骤如下：在js中定义onPullDownRefresh 处理函数,该函数和date，onLoad等生命周期函数同级，主要用于监听该页面用户下拉刷新事件。找到配置文件 pages.json并打开，然后在需要添加下拉刷新事件的页面文件中，打开enablePullDownRefresh 当完成刷新数据操作后，在 onPullDownRefresh 里添加 uni.stopPullDownRefresh来停止当前页面的下拉

vue vant下拉刷新 强制刷新页面

08-01

在Vue Vant框架中，下拉刷新通常是指使用Vant组件库中的`van-refresh`组件实现的上拉加载更多功能。如果需要强制刷新整个页面而不是仅仅触发数据更新，你可以在用户触发下拉刷新后手动操作页面路由或者执行全局的...