分享一个vant-ui中下拉刷新的BUG

最新推荐文章于 2025-06-08 13:35:17 发布
最新推荐文章于 2025-06-08 13:35:17 发布
阅读量4k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue vant-ui 文章标签： BUG
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/SnowBeatRain/article/details/90480467
博主分享了vant-ui的一个bug，在自己的iphone 6s 10.3.1手机上，下拉刷新功能无效，其他手机和电脑正常。脚手架使用vuecli3.0，vue版本为2.6.10。最终将vue版本改为2.5.22解决了问题，还给出了官方issues链接。

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

分享一个vant-ui的bug
场景：在我自己手机上（iphone 6s 10.3.1）实现的下拉刷新无效，其他手机(包含6s)和电脑均可以，（脚手架使用的vuecli3.0 脚手架中vue的版本为：vue@2.6.10）
处理结果：将vue@2.6.10改为@2.5.22解决
官方issues：https://github.com/youzan/vant/issues/3015

vant 组件【PullRefresh 下拉刷新】页面没划到最顶部依然触发刷新
nanfang_yinan的博客
02-22 6879
vant 组件【PullRefresh 下拉刷新】页面没划到最顶部依然触发刷新，导致bug【没划到顶部触发刷新使得页面顶部的部分在刷新后消失了】 解决办法： 第一步：在需要刷新的div设置class <van-pull-refresh v-model="isLoading" :disabled="isRefresh" :head-height="140" @refresh="onRefresh"> <div class="xun-geng-scroll" 第二步
用vant框架做H5时踩过的坑（下拉刷新、上拉加载等）
zl的博客
01-07 1万+
用vant框架做H5时踩过的坑 1. 页面在手机端不能上下滑动，在PC端浏览器正常滑动 说明：在设置了overflow:auto;属性的前提下，H5页面在PC端浏览器里展示可以上下滑动，在ios上可正常滑动，在安卓手机 上不能上下滑动；这现象并不是ios和安卓兼容性问题！ 原因：设置了touch-action: none;这属性为局部或者全局属性，将这条属性注释即可正常滑动。 2.使用PullRe...
经典的上拉加载下拉刷新的项目
06-02
这是一个经典的上拉加载狭隘了刷新项目，上拉下拉的风风格是一样的，上拉下拉的风格可以自定义，包含listview，textView，imageView以及通用的PullableNestScrollView上拉加载，下拉刷新。
Vue + Vant 上拉加载与下拉刷新案例模板分析
weixin_42592399的博客
06-08 615
Vue.js 是一个轻量级的JavaScript框架，以其简单易用、灵活高效的特点迅速在前端开发领域崭露头角。Vue的核心库只关注视图层，同时易于上手，适合快速开发小型至中大型的Web应用。Vant 是一个轻量、可靠的移动端 Vue 组件库，专注于提供高质量、易用的 UI 组件。它遵循简单、直观、高性能的设计原则，旨在帮助开发者快速构建移动应用。
vant 使用PullRefresh 下拉刷新组件时，无论滚动条在哪，总会触发下拉滚动
Delete_89x的博客
11-16 2056
今天遇到个问题，使用PullRefresh组件时，无论滚动条滚动到哪里，只要页面向下拉，页面的滚动条都还没到顶就触发下拉刷新 在网上找了一下，可终于找到方法了。 .van-pull-refresh { height: calc(100vh - 100px) !important; overflow: auto !important; } .van-list { height: auto !important; } ...
Vant-ui 移动端下拉刷新
weixin_52540065的博客
02-08 1528
下拉刷新
vant-ui框架的一个bug(解决切换后onload不触发)
01-22
前几天做的项目里有用到下拉刷新。使用了vant-ui里的 List 列表 瀑布流滚动加载，用于控制长列表的展示 先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法。（我使用了第三种，全局引入...
vant-ui框架的一个bug（切换后onload不触发）
热门推荐
铁马冰河入梦来
01-03 1万+
前几天做的项目里有用到下拉刷新。使用了vant-ui里的 List 列表 瀑布流滚动加载，用于控制长列表的展示 先说使用  1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法。（我使用了第三种，全局引入方法） 方式一. 使用 babel-plugin-import (推荐) babel-plugin-import 是一款 babel 插件，它会...
下拉刷新bug更新
05-27
SwipeRefreshLayout提供了一个容器，可以包含一个可滚动的视图（如ListView、RecyclerView），并在用户执行下拉手势时显示刷新指示器。 1. 添加依赖： 在`build.gradle`文件中添加SwipeRefreshLayout库依赖： ```...
element-ui级联选择器中二三级列表无法显示的解决办法
代码在路上的博客
02-27 1176
记： <el-cascader :options="parentCateList" :props="cascaderProps" v-model="selectedKeys" @change="parentCateChanged" clearable> </el-cascader> cascaderProps: { expandTrigger: 'hover', checkStrictly: t
vue 使用better-scroll实现无限加载（上拉刷新，下拉加载）
qq_37816525的博客
07-19 2703
先附上better-scroll官方文档 https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll 是什么 本项目使用vue混入mixin的方式共用js代码，方便每个组件引用，也可以把mixin中的代码直接写在组件里 单独使用 首先npm安装 npm install better-scroll --save 新建...
Vant的List组件列表 滑动后不触底也发送请求的Bug
Itmei的博客
11-15 1767
Vant的List组件列表+PullRefresh 组件实现下拉刷新和List列表滑动屏幕到底部时发送请求效果。把van-list和van-pull-refresh添加成组件，由于改需求在许多页面都可以使用到,组件名称提取为，list是传递的商品集合，在通过插槽的显示由父页面来定义渲染的样式这个插槽是使用for把商品集合遍历，并且每个div一个商品我们可以使用把div转为行内块这样我们也可以完成需求，只要不出问题的方案就是好方案。
记录一次van-list的BUG
acmen_lxx的博客
07-17 560
vant的list的BUG
vant:解决下拉刷新和滚动的冲突（手机端）
qq_41979331的博客
03-10 2476
html: <div class="gzrwClass"> <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <div class="gzrw_scroll"> <div v-for="(item, index) in dataList" :key="index" > ~~~~~~
vant中下拉刷新和元素滚动下拉冲突问题解决
qq_57268984的博客
07-20 5841
vant中下拉刷新和元素滚动下拉冲突问题解决
vant PullRefresh和组件滚动事件冲突处理
海阔天空
06-07 1824
vant下拉刷新和组件滚动事件冲突问题解决
关于vantList下拉刷新和上滑动冲突问题解决
weixin_44207118的博客
09-19 1248
vant中滚动加载向下滑动和下拉刷新冲突
vant-ui 下拉刷新安卓机和苹果机处理
qq_39852835的博客
09-22 910
如下图直接复制vant ui 上的代码，在安卓机上上滑会触发下拉刷新状态。 <template> <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <van-cell v-
vant-ui 下拉刷新组件和滚动冲突
优快云_Sviexu的博客
12-31 1786
问题描述: 在使用vant-ui的下拉刷新和滚动加载组件时, 上下滑动屏幕时, 发现向下滑动总是触发下拉刷新( ios没有问题 ) 解决过程: 搜索了相关问题, 有的是在滚动内容上加@touchmove.stop 属性, 有的是改写<van-pull-refresh>组件样式. 尝试之后问题未解决. 于是重新整理了一遍样式,统一用flex布局, 然后将<van-pull-refresh>组件单独放在一个固定高度的容器内,并且给父容器添加overflow:hidden属性;再在
vant-ui实现下拉刷新和上拉加载
最新发布
07-13
在 Vant-UI 中，`van-pull-refresh` 和 `van-list` 是实现下拉刷新与上拉加载更多数据功能的核心组件。以下是如何结合 Vue.js 使用这两个组件的详细步骤： ### 1. 基本结构 首先，在模板中使用 `van-pull-refresh`...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值