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

一、问题

在vant中使用van-pull-refresh组件进行下拉刷新时，可能会遇到与元素下拉冲突问题，导致一下拉就会触发刷新事件，而不会触发滚动条，这里用到了van-pull-refresh下拉组件中的disabled禁用，通过滚动值来控制禁用和启用

二、解决

• 首先在组件中绑定disabled

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

• 在data中定义

refreshDisabled:false,
scrollTop:0

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

1. 绑定ref滚动元素

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

2. 获取滚动距离值

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

3. 监听滚动，设置disabled

watch:{
    scrollTop(newVal){
        if(newVal<=0){
          this.refreshDisabled = false
        }else{
          this.refreshDisabled = true
        }
    }
}

到这就可以解决了冲突问题，但是如果说列表加了空数据组件的话，就需要用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>

此文仅做摘录供以后参考，非原创。原文章指路：(136条消息) vant中下拉刷新和元素滚动下拉冲突问题解决_不会打代码的飞仔的博客-CSDN博客