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

server/2024/10/21 10:07:07/

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/server/28419.html

相关文章

养老金融:编织中国老龄社会的金色安全网

在科技金融、绿色金融、普惠金融、养老金融、数字金融这“五篇大文章”中&#xff0c;养老金融以其独特的社会价值和深远影响&#xff0c;占据着不可或缺的地位。十三届全国政协经济委员会委员、原中国保监会副主席周延礼先生近期在多个场合的发言&#xff0c;不仅凸显了养老金…

DAO是什么?有什么用途?

DAO&#xff08;Decentralized Autonomous Organization&#xff0c;去中心化自治组织&#xff09;是一种基于区块链技术的组织形式&#xff0c;它没有中央管理层&#xff0c;而是通过智能合约和区块链上的代码来运作。DAO 的决策过程是透明的&#xff0c;通常由组织的成员通过…

【第3章】spring-mvc请求参数处理

文章目录 前言一、准备1. 增加mavan配置 二、简单参数1.JSP2.Controller 三、复杂参数1.JSP2.Controller 三、扩展1.JSP2.header3.cookie4.session 总结 前言 在上一章的基础上&#xff0c;我们来学习对于请求参数的解析&#xff0c;前后端分离已经是大势所趋&#xff0c;JSP相…

前后端分离系统的权限设计

前后端分离系统的权限设计 文章目录 前后端分离系统的权限设计概述概念简介基本概念ResourceActionEffectConditionPrivilege权限的检查方式可授权的资源API资源Module资源(模块资源)Role (角色)权限系统API获取所有module信息新建role获取role列表获取role的信息修改role删…

前端HTML如何不删除div标签将div标签隐藏

前端HTML如何不删除div标签将div标签隐藏 在 HTML 中&#xff0c;要隐藏 div 元素&#xff0c;您可以使用 CSS 的 display 属性。 以下是几种隐藏 div 元素的方法&#xff1a; 使用 display: none;:<div style"display: none;">隐藏的 div 元素</div>使…

Swift - 可选项(Optional)

文章目录 Swift - 可选项&#xff08;Optional&#xff09;1. 可选项&#xff08;Optional&#xff09;2. 强制解包&#xff08;Forced Unwrapping&#xff09;3. 判断可选项是否包含值4. 可选项绑定&#xff08;Optional Binding&#xff09;5. 等价写法6. while循环中使用可选…

设计模式-备忘录模式(Memento Pattern)结构|原理|优缺点|场景|示例

设计模式&#xff08;分类&#xff09; 设计模式&#xff08;六大原则&#xff09; 创建型&#xff08;5种&#xff09; 工厂方法 抽象工厂模式 单例模式 建造者模式 原型模式 结构型&#xff08;7种&#xff09; 适配器…

Educational Codeforces Round 165 (Rated for Div. 2 ABCDE 题)视频讲解

A. Two Friends Problem Statement Monocarp wants to throw a party. He has n n n friends, and he wants to have at least 2 2 2 of them at his party. The i i i-th friend’s best friend is p i p_i pi​. All p i p_i pi​ are distinct, and for every i ∈…