移动端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)
})

仅供参考

相关推荐
活宝小娜1 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点1 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow1 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o1 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic2 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā2 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年4 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder4 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727574 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart4 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter