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

最新推荐文章于 2024-06-20 17:18:40 发布
最新推荐文章于 2024-06-20 17:18:40 发布
阅读量6k 收藏 4
点赞数 1
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nanfang_yinan/article/details/123073027
版权

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

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

<van-pull-refresh v-model="isLoading" :disabled="isRefresh" :h
最低0.47元/天 解锁文章
灰色小漂亮
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vant 使用PullRefresh 下拉刷新组件时，无论滚动条在哪，总会触发下拉滚动
u010613970的博客
11-07 3104
今天遇到个问题，使用PullRefresh组件时，无论滚动条滚动到哪里，只要页面向下拉，页面的滚动条都还没到顶就触发下拉刷新 在网上找了一下，可终于找到方法了 .van-pull-refresh { height: calc(100vh - 100px) !important; overflow: auto !important; } .van-list { height: auto !important; } 这样就可以实现解决问题了 ...
在使用Vant组件库时，实现下拉刷新，只有在列表顶部才会刷新
qq_54334713的博客
08-31 589
本文提供了，如何实现下拉刷新，只有在列表顶部才会刷新
vant组件 顶部下拉刷新和页面底部下拉获取数据+顶部搜索框
最新发布
m0_61601708的博客
06-20 320
1.获取数据的时候ydqueryParams中的pageNum从0开始。1.html部分（顶部tab切换无，只有主体list部分）3.js中methods部分。2.js中data部分。
vue2用vant的van-pull-refresh实现上拉加载、下拉刷新
qq_21138747的博客
05-24 340
【代码】vue2用vant的van-pull-refresh实现上拉加载、下拉刷新。
附录5-黑马头条案例，组件库vant
potato123232的博客
05-30 1249
建议通过调试工具找到具体的类名，然后将其原来的css覆盖掉也可以这样在App.vue中定义整体风格，我现在把上图的样式注释掉，然后在App.vue中加入这些这样他在某些地方能满足你的要求，但是某些地方不能，比如你的标题。
mui.pullrefresh.js使用详解
热门推荐
孤云博客
11-27 1万+
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。 最近在一个项目中有用到下拉刷新和上拉加载更多的功能，选择了mui框架，研究了下，使用起来还是蛮简单的，不过也遇到一些坑，这里把最终整理出来的分享下，大多数 H5 框架都是通过 DIV 模拟下拉回弹动画，在低端 an...
Vue3 + Vant4 ·PullRefresh下拉刷新与 list列表触底加载下一页
qq_51463650的博客
02-22 1284
实际项目中的运用。Vue3 + Vant4·PullRefresh下拉刷新与 list列表触底加载下一页
小程序基本命令
aiven1637的博客
10-30 3282
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
初学vue--基于vant移动组件实现上拉加载下拉刷新的功能
weixin_53000350的博客
01-16 4074
基于vant简单实现上拉加载和下拉刷新功能
Vue vant 上拉加载 下拉刷新实际案例源码模板
05-18
Vant 的 LoadMore 组件主要用于处理分页加载数据的情况，当用户滚动到页面底部时，它会触发加载更多数据的事件。在实际案例中，hotweek.vue 文件很可能是展示一个包含热门周数据的列表组件。在该组件中，LoadMore ...
pull refresh
05-16
转载的pull refresh
bug 下拉就触发刷新而不是下拉到顶部触发.zip
12-02
当用户尝试滚动页面时，如果下拉动作过早地触发了刷新功能，而不是等到用户滚动到页面顶部，这将导致用户体验下降，因为刷新可能会意外启动，不是用户预期的行为。 描述中提到的文章链接指向了CSDN的一个MDEditor...
vue实现页面滚动到底部刷新
10-16
在Vue.js框架中，实现页面滚动到底部自动刷新功能，通常用于无限滚动或瀑布流布局，以便用户无需手动翻页即可加载更多数据。以下是一个基于Vue.js的示例，详细解释了如何实现这个功能： 首先，创建一个新的Vue实例...
IOS 下拉、弹出刷新扩展组件
01-24
下拉刷新是一种常见的移动设备UI设计，允许用户通过向下滚动列表到顶部并松开手指来触发数据的更新。在iOS中，苹果提供了一个名为UIRefreshControl的内置控件来支持这一功能。然而，原生的UIRefreshControl有时无法...
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
主要介绍了vue vantUI tab切换时 list组件不触发load事件的解决办法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
【Android开发笔记】pulltorefresh实现下拉刷新和上拉加载更多
leafseelight的专栏
11-05 1186
前言： 前段时间用到了pulltorefresh做列表控件的刷新，项目里需要使用到下拉刷新和上拉加载更多。 实际上很简单，只要使用监听类OnRefreshListener2，实现2个回调方法onPullDownToRefresh() 以及 onPullUpToRefresh() 就可以了 关键代码： 这是PullRefreshListView的上拉下拉，PullRefreshGridVi
vue vant van-pull-refresh 下拉刷新 vant-list 上拉加载 (二次封装共同点逻辑代码抽离)
qq_45752778的博客
06-10 1561
components 下拉刷新 、上拉加载、首屏骨架、空状态 封装组件 <template> <!-- * @FileDescription: 该文件的描述信息 * @author Sun Yan * @Date $ --> <van-pull-refresh v-model="$$parent.refreshing" :style="`min-height: ${refreshMinHeight}`"
android-PullRefreshLayout使用
Angus博客
07-06 4445
类似与谷歌的SwipeRefreshLayout，但比SwipeRefreshLayout漂亮。 运行效果： 使用说明： 使用方法和SwipeRefreshLayout差不多。 在xml中： 1 2 3 4 5 6     android:id="@+id/swipeRef
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 的文档和示例进行更详细的配置和定制。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值