van-pull-refresh 于van-list 或者自动滚动冲突时

最新推荐文章于 2024-06-28 07:30:00 发布
最新推荐文章于 2024-06-28 07:30:00 发布
阅读量1.4k 收藏
点赞数
分类专栏： js vue 文章标签： van-refresh 滚动冲突
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sensation_cyq/article/details/111313862
版权
js 同时被 2 个专栏收录
38 篇文章 1 订阅
订阅专栏
vue
25 篇文章 0 订阅
订阅专栏

 

1  第一次遇到的问题是 van-pull-refresh 于van-list 之间发生了滚动冲突 ，当滑动时直接刷新

2 第一次遇到 van-pull-refresh 没有使用van-list 结果还是发生了冲突

总结冲突和van-list没关系

然后解决方案就是讲van-pull-refresh 放在你可以滑动div

 

Marktubbu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vant 标签栏+上拉加载+下拉刷新demo van-tabs+van-pull-refresh+van-list demo
weixin_45753961的博客
06-09 1487
页面结构 van-tabs在最上面 van-pull-refresh在van-tabs下面 van-list在van-pull-refresh里面css关键 给van-pull-refresh设置高度为calc(100% - 44px)， 其中44px是van-tabs的高度， 同时给van-pull-refresh设置 overflow: hidden; overflow-y: scroll; 这样就能滚动起来加载更多以下是正文...
记录 vant-ui van-pull-refresh 的一些坑
热门推荐
m0_46165460的博客
02-04 1万+
坑 van-pull-refresh 里面要包含一个<div ref="fresh’> 在mounted里面设置一下高度 屏幕可视高度 - box距离顶部top，因为van-pull-refresh有个overflow:true属性，高度不够的时候下拉的时候会隐藏一些内容。 mounted () { this.freshHeight = document.document...
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据，下拉刷新当前列表数据（等同于翻页功能）
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
06-29 9885
<template> <div class="sg-page-body"> <div class="sg-list"> <van-pull-refresh v-model="pullLoading" @refresh="onPullRefresh" success-text="刷新成功" > <van-list v-model="listLoading" @load="o.
van-pull-refresh与van-list同时使用触发两次下拉，出现两个加载中进度条
Julia_0502的博客
05-05 2436
van-pull-refresh与van-list同时使用触发两次下拉，出现两个加载中进度条
vue3.0 + vant实现下拉刷新上拉加载
最新发布
chengcheng9876的博客
06-28 1145
vue3.0 + vant实现下拉刷新上拉加载 @load事件不生效，在滚动的过程中，onLoad事件没有任何反应
van-pull-refresh嵌套van-list滑动冲突问题
自由且洒脱
12-28 1451
style如下即可解决，关键是refresh滚动，list不用滚动 &-refresh { width: 100%; height: 100%; overflow: scroll; &-list { width: 100%; height: 100%; &-timeleft { padding-left: 40px; } } }
vue3 van-list van-pull-refresh实现上拉加载，下拉刷新
@必意玲
04-12 2735
用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。用该组件可实现上拉加载。两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将。事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将。此时可以发起异步操作并更新数据，数据更新完毕后，将。若数据已全部加载完毕，则直接将。// 如果返回数据为空，表示已加载完成。
vue3.0使用van-pull-refresh，与页面滚动事件冲突，滚动数据，会触发刷新
xixi的博客
07-20 1300
遇到的问题：vue3.0使用van-pull-refresh，与页面滚动事件冲突，滚动数据，会触发刷新。1.van-pull-refresh加上disabled，限制它是否可以滚动。2.添加事件监听滚动，获取滚动距离，设置disabled。
vue vant van-pull-refresh 下拉刷新 vant-list 上拉加载 (二次封装共同点逻辑代码抽离)
qq_45752778的博客
06-10 1597
components 下拉刷新 、上拉加载、首屏骨架、空状态 封装组件 <template> <!-- * @FileDescription: 该文件的描述信息 * @author Sun Yan * @Date $ --> <van-pull-refresh v-model="$$parent.refreshing" :style="`min-height: ${refreshMinHeight}`"
van-pull-refresh配合van-list写法
05-31
好的，下面是使用 van-pull-refresh 和 van-list 的示例代码： ```vue <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list :loading="loading" :finished="finished" :error="error" @...
基于vue的下拉刷新指令和滚动刷新指令
08-31
主要介绍了基于vue的下拉刷新指令和滚动刷新指令的相关资料,需要的朋友可以参考下
vue移动端实现滚动加载更多和下拉刷新功能，vant-ui的PullRefresh和List组件结合使用的坑
一键写代码的博客
04-29 9235
需求，移动端列表页不再是分页实现点击上一页下一页，需要实现滚动到底部自动加载下一页，页面整个下拉的话，就刷新当前页面的数据。 需求很简单。我这边引入了vant-ui，实现起来呢，遇到各种问题。网上找了一大圈，发现一个能打的都没有，都有问题。我整个人都不好了。为什么呢？ 特此先记录一下，我的实现过程。虽然，不是最好的实现方式，但是，目前各种暴力测试，没有发现bug了。总算能用了。 测试遇到的问题...
van-pull-refresh下拉刷新与局部滚动条冲突
Julia_0502的博客
05-05 3249
van-pull-refresh下拉刷新与局部滚动条冲突
vant van-pull-refresh 下拉刷新组件与局部滚动冲突
qq_26094091的博客
08-06 4500
vant van-pull-refresh 下拉刷新组件与局部滚动冲突 项目场景： 页面可以下拉刷新，同时还有局部列表可以滚动 问题描述： 局部列表滚动时，会触发下拉刷新事件 解决方案： van-pull-refresh 组件有disabled属性，设置disabled=true时，不会触发下拉刷新。所以要再局部列表滚动时将disabled设置为true,滚动结束在设置为false(如果不设置为false，会引起其他区域不可滑动)。 因为我这里局部区域是子组件，所以要通过监听子组件touchmo
van-pull-refresh和van-list配合使用时出现的问题以及解决方案
HDdgut的博客
07-12 3312
问题：van-pull-refresh和van-list配合使用 ，实现上拉加载，下拉刷新功能，van-list 上拉加载之后，下拉滑动数据时，触发van-pull-refresh的下拉刷新，没有滑动数据到底部，再触发下拉刷新 解决：van-pull-refresh 要放到可以固定高度且可以滑动的div中 ...
vant-ui 下拉刷新组件和滚动冲突
CSDN_Sviexu的博客
12-31 1551
问题描述: 在使用vant-ui的下拉刷新和滚动加载组件时, 上下滑动屏幕时, 发现向下滑动总是触发下拉刷新( ios没有问题 ) 解决过程: 搜索了相关问题, 有的是在滚动内容上加@touchmove.stop 属性, 有的是改写<van-pull-refresh>组件样式. 尝试之后问题未解决. 于是重新整理了一遍样式,统一用flex布局, 然后将<van-pull-refresh>组件单独放在一个固定高度的容器内,并且给父容器添加overflow:hidden属性;再在
vue 使用vant-ui 的 List 组件可以与 PullRefresh 组件结合使用，实现下拉刷新的效果，上划加载更多
qq_45668489的博客
07-07 987
vue 使用vant-ui 的 List 组件可以与 PullRefresh 组件结合使用，实现下拉刷新的效果，上划加载更多 1.列表页面布局，红色为外层样式设置 { height: 100%; overflow-y: auto; } 2.绿色为需要加载的列表项 <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="loading" :finish
vant PullRefresh和组件滚动事件冲突处理
海阔天空
06-07 1366
vant下拉刷新和组件滚动事件冲突问题解决
关于vantList下拉刷新和上滑动冲突问题解决
weixin_44207118的博客
09-19 1088
vant中滚动加载向下滑动和下拉刷新冲突
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值