vue3.0使用van-pull-refresh，与页面滚动事件冲突，滚动数据，会触发刷新_vant下拉刷新与区域滚动冲突

遇到的问题：vue3.0使用van-pull-refresh，与页面滚动事件冲突，滚动数据，会触发刷新
解决方案：
1.van-pull-refresh加上disabled，限制它是否可以滚动

<van-pull-refresh
     v-model="loadingRefresh"
      success-text="刷新成功"
      :disabled="refreshDisabled"
      @refresh="onRefresh"
  >
 <div v-if="list.length>0" ref="content">
   <div  v-for="(item,index) in list" :key="index">
   </div>  
 </div>
</van-pull-refresh>        
1
2
3
4
5
6
7
8
9
10
11

2.添加事件监听滚动，获取滚动距离，设置disabled

const refreshDisabled = ref(false);
const content = ref();
const loadingRefresh = ref(false);
const scroll = (event) => {
  const scrollTop = event.target.scrollTop
  if(scrollTop<=0){
    refreshDisabled.value = false
  }else{
    refreshDisabled.value = true
  }
}
onMounted(async()=>{
  content.value.addEventListener('scroll', scroll)
})
const onRefresh = () => {
   setTimeout(() => {
     showToast('刷新成功');
     loadingRefresh.value = false;
   }, 1000);
 };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20