uniapp 遮罩穿透

uniapp 遮罩穿透问题解决方法

遮罩穿透是指在uniapp中，当弹出层或遮罩层显示时，底层的页面仍然可以滚动或点击的问题。以下是几种常见的解决方法：

禁用页面滚动

在遮罩层显示时，可以通过设置页面的overflow属性来禁用滚动。在遮罩层出现时，将页面的overflow设为hidden，遮罩层消失时恢复。

.page-container {
  overflow: hidden;
}

使用@touchmove事件阻止默认行为

在遮罩层的根元素上绑定@touchmove事件，并阻止默认行为。这种方法适用于需要阻止遮罩层下的内容滚动。

<view class="mask" @touchmove.prevent></view>

使用cover-view组件

cover-view是uniapp提供的原生组件，可以覆盖在普通组件之上。使用cover-view作为遮罩层可以避免穿透问题。

<cover-view class="mask"></cover-view>

动态控制touch-action属性

通过动态设置touch-action属性为none来阻止触摸事件的默认行为。这种方法在H5端较为有效。

.mask {
  touch-action: none;
}

使用uni-popup组件

uni-popup是uniapp官方提供的弹层组件，已经内置了遮罩穿透的处理逻辑。使用该组件可以避免手动处理穿透问题。

<uni-popup ref="popup" type="center">内容</uni-popup>

监听遮罩层状态

在遮罩层显示和隐藏时，动态控制底层页面的滚动行为。可以通过uni.pageScrollTo方法将页面滚动到顶部或固定位置。

methods: {
  showMask() {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 0
    });
  }
}

使用position: fixed

将遮罩层的position设为fixed，并设置z-index确保遮罩层在最上层。这种方法可以防止遮罩层下的内容被点击。

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

以上方法可以根据具体场景选择使用，通常结合多种方法可以达到更好的效果。