vant下拉刷新发送两次请求的问题

最新推荐文章于 2025-06-08 13:35:17 发布
最新推荐文章于 2025-06-08 13:35:17 发布
阅读量7.6k 收藏 6
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Vue.js 前端 文章标签： vant 两次请求 下拉刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Bugggget/article/details/90291706
博客指出在使用Vant的上拉加载和下拉刷新功能时，可能出现下拉刷新发送两次请求的问题。原因是下拉刷新过程中会触发上拉加载。解决方法是在下拉刷新时将上拉加载的finished设为true，完成后再设为false。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题

在vant的上拉加载和下拉刷新同时使用的过程中，可能会出现下拉刷新发送了两次请求的问题

原因

下拉刷新过程中，可能会触发上拉加载，导致发送两次请求。

解决方法

所以在下拉刷新过程中，可以将上拉加载的finished设置为true，这样在上拉刷新过程中就不会进行上拉加载，在下拉刷新完成之后再将上拉加载的finished设置为false
在这里插入图片描述
在这里插入图片描述

猿创征文｜vue vant-ui数据列表上拉加载更多，下拉刷新功能
总结前端开发中遇到的问题，分享前端知识
08-27 2439
功能需求：获取后端接口返回的数据，实现列表数据上滑加载更多下一页数据，下拉数据刷新功能，结合vant-ui框架实现。可直接参考使用。
vant下拉刷新，第一次进去，请求了两次
qq_37194812的博客
04-26 1049
<template> <div> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false" offset="50" > <van-cell-group> <van-cell.
vant (Vue组件库) 下拉加载 会出现加载两次的情况
weixin_42042250的博客
04-09 2万+
List 组件通过loading和finished两个变量控制加载状态，当组件滚动到底部时，会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据，数据更新完毕后，将loading设置成false即可。若数据已全部加载完毕，则直接将finished设置成true即可。 <van-pull-refresh v-model="isRefresh" @refre...
Vue + Vant 上拉加载与下拉刷新案例模板分析
最新发布
weixin_42592399的博客
06-08 621
Vue.js 是一个轻量级的JavaScript框架，以其简单易用、灵活高效的特点迅速在前端开发领域崭露头角。Vue的核心库只关注视图层，同时易于上手，适合快速开发小型至中大型的Web应用。Vant 是一个轻量、可靠的移动端 Vue 组件库，专注于提供高质量、易用的 UI 组件。它遵循简单、直观、高性能的设计原则，旨在帮助开发者快速构建移动应用。
vant 下拉刷新与上拉加载一起使用的问题 下拉刷新触发两次 list与pull
暖光的博客
06-09 4376
//下拉刷新 onRefresh() { this.list = []; this.curPage = 1; this.finished = true; this.getData(); }, getData() { this.isLoading = false; getList({ .
下拉刷新上拉加载与vant多次加载相同数据问题
trayvontang的博客
06-10 3255
下拉刷新与上拉加载 做为一个不熟悉前端开发的后端，对于：下拉刷新与上拉加载我开始也很懵，只知道都是加载数据，按照一般操作逻辑一般是向上滑动，上拉加载数据就好了，为什么要搞下拉刷新。 后来看到vant的List 组件可以与 PullRefresh 组件结合使用的例子猛然醒悟。 下拉刷新，重点在刷新，一般操作是：清空当前列表数据，重新从零开始加载数据。 上拉加载，重点在于加载更多的数据，就是之前还没有加载的数据。 vant上拉加载多次重复问题 刚开始因为没太理解下拉刷新和上拉加载的区别，我一直以为是下拉刷新和
解决vant列表刷新，接口调用多次
weixin_51140082的博客
11-23 448
onLoading默认为false，为false，才会调用接口,开始调接口将onLoading改为true，等到执行完再改为false// 请求数据列表})
vant实现下拉刷新和上拉加载_解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)...
weixin_39802814的博客
12-20 1115
1. 页面在手机端不能上下滑动，在PC端浏览器正常滑动说明：在设置了overflow:auto;属性的前提下，H5页面在PC端浏览器里展示可以上下滑动，在ios上可正常滑动，在安卓手机 上不能上下滑动；这现象并不是ios和安卓兼容性问题！原因：设置了touch-action: none;这属性为局部或者全局属性，将这条属性注释即可正常滑动。2.使用PullRefresh和List列表实现下拉刷新和...
vant van-pull-refresh + van-list实现list列表支持搜索和下拉刷新
shiqifei的博客
09-25 1604
在使用 van-pull-refresh + van-list实现list列表下拉刷新时遇到几个问题在这里进行一个总结。
十分钟教你用vant实现下拉刷新上拉加载
热门推荐
诗雨远方的博客
06-27 4万+
十分钟教你用vant实现下拉刷新上拉加载 vant是有赞团队推出的基于vue一套移动端小程序UI框架，不写小程序我也用了下，还是很不错的，刚好今天要做一个移动端上拉刷新下拉加载功能，去网上看的例子当中，没有一个是尼玛能用的，我下面贴出的代码，亲测可用。 选择了上班，以为自己没有了梦想，当孤独来临的时候，如果专...
vant-下拉刷新，上拉加载2-调接口实现
幸福有多远
09-18 480
<template> <div class="nc-discover"> <van-nav-bar title="发现" fixed /> <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="finished" > <van-list v-model="loading" .
vue vant中list首次加载不满一屏会请求两次数据重复（已解决）
明明的博客
12-10 4335
首先把finished 默认为true 然后添加 immediate-check=true <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="true"> </van-list>
vant分页如果页面滚动到下方,点击切换会触发分页js,导致数据重复
cqk9999321的博客
07-10 1102
解决办法:点击数据切换时,先使用window.scrollBy(0,-30);把页面置顶到顶部,然再请求接口
van-pull-refresh与van-list同时使用触发两次下拉，出现两个加载中进度条
Julia_0502的博客
05-05 2959
van-pull-refresh与van-list同时使用触发两次下拉，出现两个加载中进度条
下拉刷新van-pull-refresh、回退keepAlive、滚动记住位置scroll
m0_57071129的博客
05-10 1128
1、先是上拉刷新下拉加载，van-pull-refresh。如果不想一进来就加载两次可以在van-list上加上:immediate-check=“false”。 //上拉加载 onLoad() { if (!this.timer) { this.timer = setTimeout(() => { this.getData(); this.timer = null; }, 1000) } }, getData() { const search= { name: ""
vant tab list 下拉刷新及分页加载数据异常
04-15 2242
vant tab list 下拉刷新及分页加载数据问题
vue项目created()被调用多次的坑
BHSZZY的博客
12-05 8996
最近碰到一个奇怪的生产问题： 正常情况下、前端页面会请求一次后台、然后后台返回信息（或）、前端展示； 后台用aop+redis写了一个防止重复调用的方法，如果5s内同一个用户重复调用同一个接口，就返回，前端就会展示这个。但是，某几个页面，前端总是会重复调用后端2次，导致用户只能看到，无法确认本次操作是成功还是失败，严重影响了用户的正常使用。（虽然是处理成功，但是显示不出来…）一开始还怀疑是不是后端的问题，排查了半天，终于锁定了，是前端的问题，vue项目中的方法被调用了。继续排查，发现从正常页面跳转到这个问题
Http跨域时的Option请求
weixin_30822451的博客
08-10 754
写这篇文章时，我们碰到的一个场景是：要给R系统做一个扩展小应用，前端的html、js放在R系统里，后端需要做一个单独的站点N.B.com。这就导致了跨域问题，而且要命的是，后端同学没有权限向招聘的系统里加接口做后端跨域，因此只能做个接口允许前端跨域访问。 有两种方案：1. 使用ajax直接跨域访问，2.使用JsonP。实际使用时，由于JsonP向Server提交URL的长度限制在8000字符...
van-pull-refresh和van-list配合使用时出现的问题以及解决方案
HDdgut的博客
07-12 4501
问题：van-pull-refresh和van-list配合使用 ，实现上拉加载，下拉刷新功能，van-list 上拉加载之后，下拉滑动数据时，触发van-pull-refresh的下拉刷新，没有滑动数据到底部，再触发下拉刷新 解决：van-pull-refresh 要放到可以固定高度且可以滑动的div中 ...
vant 下拉刷新 只在顶部刷新
02-28
### 实现 Vant 下拉刷新仅在页面顶部触发 为了确保 `van-pull-refresh` 组件只在滚动到页面顶部时触发刷新功能，可以通过监听滚动事件并动态设置组件的禁用状态来实现这一目标。具体做法如下： #### 方法一：基于滚动位置判断 通过 JavaScript 获取当前页面或容器的滚动距离，并据此决定是否允许下拉刷新操作。 ```javascript let pullRefreshInstance; const handleScroll = () => { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop === 0) { pullRefreshInstance.disabled = false; // 启用下拉刷新 } else { pullRefreshInstance.disabled = true; // 禁用下拉刷新 } }; // 初始化时绑定scroll事件 window.addEventListener('scroll', handleScroll); // 渲染pull-refresh实例后获取其引用 onMounted(() => { nextTick(() => { pullRefreshInstance = ref(pullRefresh).value; }); }); ``` 此方法适用于整个页面级别的滚动检测[^2]。 #### 方法二：CSS布局调整配合JavaScript逻辑控制 对于某些特定场景下的嵌套滚动条情况，则可能需要更精确地处理样式以及计算可滚动区域的实际尺寸，从而避免不必要的误触现象发生。 ```css .van-pull-refresh { height: calc(100vh - 160px); /* 调整为实际需求 */ overflow: auto; } .van-list { height: auto; } ``` 这种方法能够有效防止当 `PullRefresh` 的内容未能完全填充视窗高度时所引发的问题[^4]。 综上所述，在开发过程中应根据实际情况灵活选用上述两种方式之一或者组合使用以达到最佳效果。同时需要注意的是，如果项目中存在多个不同类型的滚动行为共存的情况，则建议优先考虑采用更为通用的第一种方案来进行全局性的管理[^3]。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值