移动端H5页面使用Vant组件库下拉刷新和页面滚动事件冲突

embedded/2024/10/21 10:11:10/

Vant组件库van-pull-refresh踩坑

van-pull-refresh在开发过程会和内容中最近的拥有overflow的元素的滚动发生冲突,造成向上滑动的时候会下拉加载

<van-pull-refresh v-model="refreshing"  @refresh="onRefresh"><van-listv-model="refreshFlag"offset="20"finished-text="刷新成功"pulling-text="下拉可以刷新"loosing-text="松开立即刷新"@refresh="onRefresh":pull-distance="80":disabled="refreshDisabled":immediate-check="false"><van-cell v-for="item in list" :key="item.id" :title="item" /></van-list>
</van-pull-refresh>

目前使用的,并且已经解决问题的方法是通过通过设置::disabled=“refreshDisabled”,限制滚动实现的。
原理是:当滚动元素的scrollTop === 0 的时候,再下拉说明是下拉加载,然后更该:refreshDisabled的值为false,就可以实现加载了。

const refreshDisabled = ref(false);
const content = ref()const handleScroll = (event) => {// <el-table>...</el-table>// 有一些组件原本的自带的滚动不一定是scrollTop,比如el-table是.bodyWrapper.scrollTopconst scrollTop = event.target.scrollTopif(scrollTop<=0){refreshDisabled.value = false}else{refreshDisabled.value = true}
}
onMounted(async()=>{content.value.addEventListener('scroll', handleScroll)
})
onUnmounted (()=>{content.value.removeEventListener('scroll', handleScroll)
})

仅供参考


http://www.ppmy.cn/embedded/31731.html

相关文章

字符判断(数字字母)

简单应用&#xff1a;1081 检查密码&#xff08;测试点2简析&#xff09; isdigit(ch) 是否为数字 int isdigit(int c);//c是数字&#xff0c;则返回非零值&#xff0c;否则返回 0C 库函数 int isdigit(int c) 检查所传的字符是否是十进制数字字符。 十进制数字是&#xff…

时也命也!反派失败于错估了主角的实力——早读(逆天打工人爬取热门微信文章解读)

此子断不可留 引言Python 代码第一篇 洞见 人到中年最大的清醒&#xff1a;时也&#xff0c;运也&#xff0c;命也第二篇 人民日报要闻社会政策 结尾 自知之明是最难得的知识 真正的智慧来自于对自己能力和局限的深刻理解 引言 最近在看仙葫 然后昨天晚上刷了一下这个诛仙 发现…

【Github】直接引用Github仓库中的图片

用picgo能够上传图片、复制链接。 那如果我已经将图片通过其他方法上传到Github仓库中&#xff0c;难道还要上传一次&#xff1f; 不用&#xff01; 步骤 1.打开仓库中要访问的图片 2.复制此时浏览器链接: https://github.com/jaxhur/image/blob/main/image-2022082410480713…

【PPT技巧】PPT如何批量替换字体?

经常制作ppt的朋友可能会遇到需要批量替换字体的情况&#xff0c;如果我们想要更换ppt中的字体&#xff0c;今天分享PPT批量替换字体的两个方法。 方法一&#xff1a; 找到功能栏中的编辑选项卡&#xff0c;点击替换 – 替换字体&#xff0c;在里面选择我们想要替换的字体就可…

“中国汉字”的英语表达|柯桥考级英语生活英语商务口语培训

汉字&#xff0c;又称中文字、中国字、方块字。汉字是表意文字&#xff0c;一个汉字通常表示汉语里的一个词或一个语素&#xff0c;这就形成了音、形、义统一的特点。 我们通常用“Chinese character”表示“汉字”而不用“Chinese word”. &#x1f534; 例句&#xff1a; C…

Python-100-Days: Day08 Object-oriented programming(OOP) basics

OOP definition 把一组数据结构和处理它们的方法组成对象&#xff08;object&#xff09;&#xff0c;把相同行为的对象归纳为类&#xff08;class&#xff09;&#xff0c;通过类的封装&#xff08;encapsulation&#xff09;隐藏内部细节&#xff0c;通过继承&#xff08;in…

设计模式动态代理

什么是设计模式? 一个问题通常有n种解法&#xff0c;其中肯定有一种解法是最优的&#xff0c;这个最优的解法被人总结出来了&#xff0c;称之为设计模式。 设计模式有20多种&#xff0c;对应20多种软件开发中会遇到的问题。 关于设计模式的学习&#xff0c;主要学什么&#…

22 重构系统升级-实现不停服的数据迁移和用户切量

专栏的前 21 讲&#xff0c;从读、写以及扣减的角度介绍了三种特点各异的微服务的构建技巧&#xff0c;最后从微服务的共性问题出发&#xff0c;介绍了这些共性问题的应对技巧。 在实际工作中&#xff0c;你就可以参考本专栏介绍的技巧构建新的微服务&#xff0c;架构一个具备…