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

最新推荐文章于 2024-05-24 11:30:55 发布
最新推荐文章于 2024-05-24 11:30:55 发布
阅读量3.1k 收藏 8
点赞数 7
分类专栏： css vant
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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; }

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

diCommon
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vant 组件【PullRefresh 下拉刷新】页面没划到最顶部依然触发刷新
nanfang_yinan的博客
02-22 6053
vant 组件【PullRefresh 下拉刷新】页面没划到最顶部依然触发刷新，导致bug【没划到顶部触发刷新使得页面顶部的部分在刷新后消失了】 解决办法： 第一步：在需要刷新的div设置class <van-pull-refresh v-model="isLoading" :disabled="isRefresh" :head-height="140" @refresh="onRefresh"> <div class="xun-geng-scroll" 第二步
bug 下拉就触发刷新而不是下拉到顶部触发.zip
12-02
bug 下拉就触发刷新而不是下拉到顶部触发 文章链接https://mp.csdn.net/mdeditor/98948351#
在使用Vant组件库时，实现下拉刷新，只有在列表顶部才会刷新
qq_54334713的博客
08-31 588
本文提供了，如何实现下拉刷新，只有在列表顶部才会刷新
vue2用vant的van-pull-refresh实现上拉加载、下拉刷新
最新发布
qq_21138747的博客
05-24 330
【代码】vue2用vant的van-pull-refresh实现上拉加载、下拉刷新。
van-pull-refresh下拉刷新与局部滚动条冲突
Julia_0502的博客
05-05 3161
van-pull-refresh下拉刷新与局部滚动条冲突
vue3.0使用van-pull-refresh，与页面滚动事件冲突，滚动数据，会触发刷新
xixi的博客
07-20 1151
遇到的问题：vue3.0使用van-pull-refresh，与页面滚动事件冲突，滚动数据，会触发刷新。1.van-pull-refresh加上disabled，限制它是否可以滚动。2.添加事件监听滚动，获取滚动距离，设置disabled。
van-pull-refresh 滚动条不在最顶端时下拉也会刷新
weixin_44163210的博客
12-05 2226
解决办法：在样式中写下方代码即可解决 .van-pull-refresh { height: calc(100vh - 100px) !important; overflow: auto !important; }
vant-ui 下拉刷新组件和滚动冲突
CSDN_Sviexu的博客
12-31 1514
问题描述: 在使用vant-ui的下拉刷新和滚动加载组件时, 上下滑动屏幕时, 发现向下滑动总是触发下拉刷新( ios没有问题 ) 解决过程: 搜索了相关问题, 有的是在滚动内容上加@touchmove.stop 属性, 有的是改写<van-pull-refresh>组件样式. 尝试之后问题未解决. 于是重新整理了一遍样式,统一用flex布局, 然后将<van-pull-refresh>组件单独放在一个固定高度的容器内,并且给父容器添加overflow:hidden属性;再在
vant滚动条下滑与下拉刷新冲突问题
qq_42628798的博客
07-24 2780
问题描述： 在往下拨动数据进行查看起始数据的时候，往往与vant的下拉刷新的组件冲突，本来是想往下滑动滚动条查看数据，结果老是触发下拉刷新。 解决方案： 在数据内容的div中添加**@touchmove.stop**属性 <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <div v-for="item in tableData" :key="item.ID" @touchmove.stop> ...
Vue vant 上拉加载 下拉刷新实际案例源码模板
05-18
在这个"Vue vant 上拉加载 下拉刷新实际案例源码模板"中，我们将探讨如何使用 Vant 的上拉加载（LoadMore）和下拉刷新（PullRefresh）功能来增强用户体验。 1. **Vant LoadMore组件**： Vant 的 LoadMore 组件主要...
【JavaScript源代码】vant list组件滚动保留滚动条位置.docx
12-30
`activated`只在组件被缓存并再次激活时触发，因此非常适合用来处理滚动位置的恢复。在`activated`方法中，我们读取路由元信息`this.$route.meta.scrollTop`，然后设置列表容器（这里假设是`.app-wrapper`）的滚动...
在Vant的基础上封装下拉日期控件的代码示例
10-17
主要介绍了在Vant的基础上封装下拉日期控件的代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
主要介绍了vue vantUI tab切换时 list组件不触发load事件的解决办法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
详解如何在微信小程序开发中正确的使用vant ui组件
10-18
主要介绍了详解如何在微信小程序开发中正确的使用vant ui组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vant中下拉刷新和元素滚动下拉冲突问题解决
qq_57268984的博客
07-20 4924
vant中下拉刷新和元素滚动下拉冲突问题解决
vant实现下拉刷新和上拉加载_解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)...
weixin_39944233的博客
12-20 1879
1. 页面在手机端不能上下滑动，在PC端浏览器正常滑动说明：在设置了overflow:auto;属性的前提下，H5页面在PC端浏览器里展示可以上下滑动，在ios上可正常滑动，在安卓手机 上不能上下滑动；这现象并不是ios和安卓兼容性问题！原因：设置了touch-action: none;这属性为局部或者全局属性，将这条属性注释即可正常滑动。2.使用PullRefresh和List列表实现下拉刷新和...
vant PullRefresh和组件滚动事件冲突处理
海阔天空
06-07 1299
vant下拉刷新和组件滚动事件冲突问题解决
uniapp使用onPullDownRefresh实现页面下拉刷新
Shivy_的博客
11-18 2945
介绍 在 uniapp 中使用 onPullDownRefresh实现页面下拉刷新的步骤如下： 在js中定义onPullDownRefresh 处理函数,该函数和date，onLoad等生命周期函数同级，主要用于监听该页面用户下拉刷新事件。 找到配置文件 pages.json并打开，然后在需要添加下拉刷新事件的页面文件中，打开enablePullDownRefresh 当完成刷新数据操作后，在 onPullDownRefresh 里 添加 uni.stopPullDownRefresh来停止当前页面的下拉
vant weapp 实现下拉刷新上拉加载 完整示例
07-27
下面是一个使用 Vant Weapp 实现下拉刷新和上拉加载的完整示例： 1. 在小程序的页面文件中引入 Vant Weapp 的相关组件和样式： ```html <view> <!-- 引入下拉刷新组件 --> <van-refresh bind:refresh="onRefresh" bind:refreshing="isRefreshing" bind:refreshed="onRefreshed" > <!-- 下拉刷新内容 --> <van-loading slot="top" size="20px" type="circular" color="#1989fa" /> </van-refresh> <!-- 列表内容 --> <scroll-view scroll-y="{{true}}" bind:scrolltolower="onScrollToLower" > <!-- 列表项 --> <view wx:for="{{list}}" wx:key="index"> <!-- 列表项内容 --> </view> <!-- 上拉加载提示 --> <van-loading wx:if="{{isLoading}}" size="20px" type="circular" color="#1989fa" custom-class="loading" ></van-loading> </scroll-view> </view> ``` 2. 在页面的 JavaScript 文件中定义相关函数和数据： ```javascript Page({ data: { list: [], // 列表数据 isLoading: false, // 是否正在加载 isRefreshing: false // 是否正在刷新 }, onLoad() { this.loadData(); // 页面加载时加载数据 }, // 下拉刷新事件 onRefresh() { if (this.data.isRefreshing) return; this.setData({ isRefreshing: true }); // 模拟请求数据 setTimeout(() => { this.loadData(); this.setData({ isRefreshing: false }); }, 1000); }, // 上拉加载事件 onScrollToLower() { if (this.data.isLoading) return; this.setData({ isLoading: true }); // 模拟请求数据 setTimeout(() => { this.loadData(); this.setData({ isLoading: false }); }, 1000); }, // 加载数据 loadData() { // 模拟请求数据 const newData = []; // 新的数据 this.setData({ list: this.data.list.concat(newData) }); } }) ``` 在上面的示例中，`van-refresh` 组件用来实现下拉刷新功能，`van-loading` 组件用来显示加载状态。通过绑定相关事件和数据，当用户进行下拉刷新或上拉加载操作时，会触发相应的函数进行数据的请求和处理。 注意：以上代码只是一个示例，具体的实现方式可能会根据你的项目需求和页面结构有所不同。你可以根据 Vant Weapp 的文档和示例进行更详细的配置和定制。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值