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

news/2024/11/15 6:16:39/

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/news/1454150.html

相关文章

ZABAPGIT问题,导入github上的程序包时报 DBSQL_DUPLICATE_KEY_ERROR

跟踪程序发现在94050行 INSERT seocompotx FROM TABLE it_descriptions 报的错 刚开始&#xff0c;不想着改动他&#xff0c;把seocompotx 表的数据做下指定清楚&#xff0c;但是5次清楚后&#xff0c;果断注释掉 改成 MODIFY seocompotx FROM TABLE it_descriptions。 在用…

Android Studio学习笔记——数据库存储

Android Studio学习笔记——数据库存储 6.1持久化技术简介6.2 文件存储将数据存储到文件中从文件中读取数据 6.3 SharedPreferences存储6.3.1 将数据存储到是SharedPreferences中6.3.2 从SharedPreferences中读取数据6.3.3 实现记住密码功能 6.4 SQLite数据库存储6.4.1 创建数据…

大数据组件之Storm简介:实时数据处理的利器

关注微信公众号 “程序员小胖” 每日技术干货&#xff0c;第一时间送达&#xff01; 引言 在当今数据驱动的世界中&#xff0c;实时数据处理成为了企业获取洞察力、优化业务流程和提升用户体验的关键。Apache Storm&#xff0c;作为大数据处理领域的重要组件之一&#xff0c;…

vue快速入门(五十四)$nextTick的使用

注释很详细&#xff0c;直接上代码 上一篇 新增内容 $nextTick的使用场景演示 源码 App.vue <template><div id"app"><h3>{{name}}</h3><button click"showfixed">修改</button><form action"post" v-s…

前端动画总结

前端动画 一、css动画 transition 过渡 transition:transiton-property,transition-duration,transition-timing-function,transition-delay相关属性说明 属性默认值其他说明property过渡的属性all不是所有css属性都支持过渡duration动画完成时间0s单位是秒timing-functio…

Android Binder机制

一.简介 Binder是什么&#xff1f; Android系统中&#xff0c;涉及到多进程间的通信底层都是依赖于Binder IPC机制。 例如当进程A中的Activity要向进程B中的Service通信&#xff0c;这便需要依赖于Binder IPC。不仅于 此&#xff0c;整个Android系统架构中&#xff0c;大量采…

【centos】vmware安装airflow流程

文章目录 1.下载系统https://mirrors.aliyun.com/centos/7/isos/x86_64/ 选择DVD20092.在VMware中&#xff0c;除了修改安装位置&#xff0c;其它选择默认安装centos73.用户名为root,登录4.网络适配器为桥接模式。5.使用命令消除显示器警告。6.安装anaconda6.1下载包&#xff1…

理解 python 中的 import

import 会执行 被 import 文件的代码 我们先构建个例子 [gatemanmanjaro-x13 python_common_import]$ tree . ├── pytest.ini ├── README.md ├── requirement.txt ├── src │ └── import_base │ ├── __init__.py │ ├── m1.py │ …