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

Vant组件库van-pull-refresh踩坑

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

javascript 复制代码
<van-pull-refresh v-model="refreshing"  @refresh="onRefresh">
    <van-list
              v-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,就可以实现加载了。

javascript 复制代码
const refreshDisabled = ref(false);
const content = ref()

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

仅供参考

相关推荐
逐·風44 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫1 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦2 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山3 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果3 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄4 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰5 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf5 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询