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

疯人院院长

于 2024-04-28 16:33:37 发布

阅读量661

点赞数 2

本文链接：https://blog.csdn.net/qq_42894094/article/details/138281136

版权

本文讲述了在使用Vant组件库中的van-pull-refresh时遇到的滚动冲突问题，通过监听滚动事件并控制`disabled`属性来解决下拉加载与内容元素滚动的矛盾，展示了具体实现代码。

摘要由CSDN通过智能技术生成

Vant组件库van-pull-refresh踩坑

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

<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，就可以实现加载了。

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)
})