vant PullRefresh和组件滚动事件冲突处理_vant下拉刷新与区域滚动冲突

在组件中绑定disabled

<van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="refreshDisabled" >
 <van-pull-refresh>
1
2

在data中定义

refreshDisabled:false,
scrollTop:0
1
2

在mounted钩子函数中获取元素滚动值，值有滚动值大于0时才触发下拉事件:

绑定ref滚动元素

<div class="list_data" ref="tableScorll">//此绑定元素为滚动元素，也就是设置overflow：auto；的元素
1

获取滚动距离值

mounted(){
      let tableScorll = this.$refs.tableScorll;
      tableScorll .addEventListener('scroll',()=>{
            this.scrollTop = tableScorll.scrollTop//data中定义scrollTop为0
      });
},
1
2
3
4
5
6

监听滚动，设置disabled

watch:{
    scrollTop(newVal){
        if(newVal<=0){
          this.refreshDisabled = false
        }else{
          this.refreshDisabled = true
        }
    }
}
1
2
3
4
5
6
7
8
9

到这就可以解决了冲突问题，但是如果说列表加了空数据组件的话，就需要用v-show来切换，不然mounted钩子函数中ref获取不到dom元素

<van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="refreshDisabled" >
     <van-empty description="描述文字" v-if = "listData.length == 0"/>
     <div class="list_data" ref="tableScorll" v-show = "listData.length !== 0">
           //内容
     </div>
</van-pull-refresh>
1
2
3
4
5
6

转自：vant中下拉刷新和元素滚动下拉冲突问题解决