vant van-pull-refresh 下拉刷新组件与局部滚动冲突

最新推荐文章于 2024-11-06 07:52:10 发布

前端小不点

最新推荐文章于 2024-11-06 07:52:10 发布

阅读量4.6k

点赞数 3

文章标签： vue

本文链接：https://blog.csdn.net/qq_26094091/article/details/119453844

版权

本文介绍了在Vue项目中，如何处理van-pull-refresh下拉刷新组件与局部滚动列表的冲突问题。通过设置van-pull-refresh的disabled属性，并监听子组件的touchmove和touchend事件，动态控制disabled属性，实现局部滚动时不触发下拉刷新。在子组件中通过$emit传递刷新禁用状态到父组件，确保交互的正确性。

摘要由CSDN通过智能技术生成

vant van-pull-refresh 下拉刷新组件与局部滚动冲突

项目场景：

页面可以下拉刷新，同时还有局部列表可以滚动

问题描述：

局部列表滚动时，会触发下拉刷新事件

解决方案：

van-pull-refresh 组件有disabled属性，设置disabled=true时，不会触发下拉刷新。所以要再局部列表滚动时将disabled设置为true,滚动结束在设置为false(如果不设置为false，会引起其他区域不可滑动)。

因为我这里局部区域是子组件，所以要通过监听子组件touchmove,touchend方法修改父组件中van-pull-refresh 组件disabled属性

//父组件
<van-pull-refresh v-model='refreshing' success-text="刷新成功"
 @refresh='onRefresh'  :disabled  = "refreshDisabled">
<div>
		//子组件 
		<table  @afather= 'freshDisabledFalse'></table>
</div>
</van-pull-refresh>

methed(){
	freshDisabledFalse(val){
	this.refreshDisabled = val
	}
}

//子组件内容

<div class='vanTable'  ref='tableScorll'>

</div>

mounted(){
	let tableScorll = this.$refs.tableScorll;
	tableScorll .addEventListener('touchmove',()=>{
	
	                this.scrollTop = tableScorll .scrollTop;
	
	            });
tableScorll .addEventListener('touchend',()=>{
	
	                this.scrollTop = tableScorll .scrollTop;
	
	            });
}

watch(){
		scrollTop(val){
			if(val<=0){
			
			this.refreshDisabled = false
			}else{
			this.refreshDisabled = true
			}
			this.$emit('afather',this.refreshDisabled)
		}
}