vant下拉刷新与局部滚动冲突解决

遇到的问题

滚动内容向下滑动，再往上滑动的时候，就很难滑动，变成了下拉刷新

解决方案

通过控制vant-pull-refresh组件的disabled属性，当滚动到顶部的时候才允许触发下拉刷新，其他情况下不触发

具体实现

 <--- 下拉刷新组件 ---->
 <van-pull-refresh
   :disabled="isRefreshDisable"
   @refresh="onRefresh"
 >
   <div ref="contentContainerRef" @scroll="onScroll"></div>
 </van-pull-refresh>
 
 <script>
 const isRefreshDisable = ref(false)
 const contentContainerRef = ref()
 // 监听滚动
 const onScroll = () => {
  // 获取到滚动的元素的滚动距离
  const scrollTop = contentContainerRef.value.scrollTop
  // 距离大于0时，下拉刷新不生效
  if (scrollTop > 0) {
    isRefreshDisable.value = true
  } else {
    isRefreshDisable.value = false
  }
}
</script>