在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

在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>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐