vant中下拉刷新和元素滚动下拉冲突问题解决
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
在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>
更多推荐
已为社区贡献2条内容
所有评论(0)