uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题

1,167 阅读1分钟

问题背景:

使用uniapp或者uview组件时,涉及到遮罩层的出现,一般会随之出现一个问题,就是当长按出现遮罩层时,此时不松手,往下滑动屏幕,还是会触发当前页面所涉及到的页面滚动甚至下拉刷新事件. 看了下各种博客人云亦云. 我找到一个很简单的方法

分析

首先,这个情况是什么时候会出现? 遮罩层出现的时候会出现,那么,我们就可以监听控制遮罩层或者包含遮罩层的那个组件的flag变量. 当遮罩层显示的时候,让当前页面的overflow变成hideen,在遮罩层隐藏的时候,设置当前页面的overflow为''. 设置了overflow为hidden,页面滚动条都没了,我看你怎么滚动.

上代码

watch: {
		showupsheet(val){
				if(val){
				//遮罩层显示
					document.body.style.overflow = 'hidden';
				}else{
					document.body.style.overflow = '';
				}
			}
		},

效果 image.png 完美解决!