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

前端李十三

已于 2023-07-25 09:29:23 修改

阅读量2k

点赞数

文章标签： uni-app

于 2023-07-25 09:26:30 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_64530670/article/details/131910178

版权

当使用uniapp或uview时，长按出现遮罩层并滑动仍会触发页面滚动。作者提出一种解决方案：通过监听遮罩层显示隐藏的flag，动态设置document.body.style.overflow，遮罩层显示时设为hidden阻止滚动，隐藏时恢复，有效解决了问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题背景:

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

分析

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

上代码

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