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 2435
功能需求：获取后端接口返回的数据，实现列表数据上滑加载更多下一页数据，下拉数据刷新功能，结合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 616
Vue.js 是一个轻量级的JavaScript框架，以其简单易用、灵活高效的特点迅速在前端开发领域崭露头角。Vue的核心库只关注视图层，同时易于上手，适合快速开发小型至中大型的Web应用。Vant 是一个轻量、可靠的移动端 Vue 组件库，专注于提供高质量、易用的 UI 组件。它遵循简单、直观、高性能的设计原则，旨在帮助开发者快速构建移动应用。
vant 下拉刷新与上拉加载一起使用的问题 下拉刷新触发两次 list与pull
暖光的博客
06-09 4374
//下拉刷新 onRefresh() { this.list = []; this.curPage = 1; this.finished = true; this.getData(); }, getData() { this.isLoading = false; getList({ .
下拉刷新上拉加载与vant多次加载相同数据问题
trayvontang的博客
06-10 3253
下拉刷新与上拉加载 做为一个不熟悉前端开发的后端，对于：下拉刷新与上拉加载我开始也很懵，只知道都是加载数据，按照一般操作逻辑一般是向上滑动，上拉加载数据就好了，为什么要搞下拉刷新。 后来看到vant的List 组件可以与 PullRefresh 组件结合使用的例子猛然醒悟。 下拉刷新，重点在刷新，一般操作是：清空当前列表数据，重新从零开始加载数据。 上拉加载，重点在于加载更多的数据，就是之前还没有加载的数据。 vant上拉加载多次重复问题 刚开始因为没太理解下拉刷新和上拉加载的区别，我一直以为是下拉刷新和
解决vant列表刷新，接口调用多次
weixin_51140082的博客
11-23 447
onLoading默认为false，为false，才会调用接口,开始调接口将onLoading改为true，等到执行完再改为false// 请求数据列表})
vant实现下拉刷新和上拉加载_解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)...
weixin_39802814的博客
12-20 1106
1. 页面在手机端不能上下滑动，在PC端浏览器正常滑动说明：在设置了overflow:auto;属性的前提下，H5页面在PC端浏览器里展示可以上下滑动，在ios上可正常滑动，在安卓手机 上不能上下滑动；这现象并不是ios和安卓兼容性问题！原因：设置了touch-action: none;这属性为局部或者全局属性，将这条属性注释即可正常滑动。2.使用PullRefresh和List列表实现下拉刷新和...
vant van-pull-refresh + van-list实现list列表支持搜索和下拉刷新
shiqifei的博客
09-25 1596
在使用 van-pull-refresh + van-list实现list列表下拉刷新时遇到几个问题在这里进行一个总结。
十分钟教你用vant实现下拉刷新上拉加载
热门推荐
诗雨远方的博客
06-27 4万+
十分钟教你用vant实现下拉刷新上拉加载 vant是有赞团队推出的基于vue一套移动端小程序UI框架，不写小程序我也用了下，还是很不错的，刚好今天要做一个移动端上拉刷新下拉加载功能，去网上看的例子当中，没有一个是尼玛能用的，我下面贴出的代码，亲测可用。 选择了上班，以为自己没有了梦想，当孤独来临的时候，如果专...
vant-下拉刷新，上拉加载2-调接口实现
幸福有多远
09-18 479
<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 4333
首先把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 1101
解决办法:点击数据切换时,先使用window.scrollBy(0,-30);把页面置顶到顶部,然再请求接口
van-pull-refresh与van-list同时使用触发两次下拉，出现两个加载中进度条
Julia_0502的博客
05-05 2949
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 2240
vant tab list 下拉刷新及分页加载数据问题
vue项目created()被调用多次的坑
BHSZZY的博客
12-05 8988
最近碰到一个奇怪的生产问题： 正常情况下、前端页面会请求一次后台、然后后台返回信息（或）、前端展示； 后台用aop+redis写了一个防止重复调用的方法，如果5s内同一个用户重复调用同一个接口，就返回，前端就会展示这个。但是，某几个页面，前端总是会重复调用后端2次，导致用户只能看到，无法确认本次操作是成功还是失败，严重影响了用户的正常使用。（虽然是处理成功，但是显示不出来…）一开始还怀疑是不是后端的问题，排查了半天，终于锁定了，是前端的问题，vue项目中的方法被调用了。继续排查，发现从正常页面跳转到这个问题
Http跨域时的Option请求
weixin_30822451的博客
08-10 752
写这篇文章时，我们碰到的一个场景是：要给R系统做一个扩展小应用，前端的html、js放在R系统里，后端需要做一个单独的站点N.B.com。这就导致了跨域问题，而且要命的是，后端同学没有权限向招聘的系统里加接口做后端跨域，因此只能做个接口允许前端跨域访问。 有两种方案：1. 使用ajax直接跨域访问，2.使用JsonP。实际使用时，由于JsonP向Server提交URL的长度限制在8000字符...
van-pull-refresh和van-list配合使用时出现的问题以及解决方案
HDdgut的博客
07-12 4483
问题：van-pull-refresh和van-list配合使用 ，实现上拉加载，下拉刷新功能，van-list 上拉加载之后，下拉滑动数据时，触发van-pull-refresh的下拉刷新，没有滑动数据到底部，再触发下拉刷新 解决：van-pull-refresh 要放到可以固定高度且可以滑动的div中 ...
vant 下拉刷新 只在顶部刷新
02-28
### 实现 Vant 下拉刷新仅在页面顶部触发 为了确保 `van-pull-refresh` 组件只在滚动到页面顶部时触发刷新功能，可以通过监听滚动事件并动态设置组件的禁用状态来实现这一目标。具体做法如下： #### 方法一：基于...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值