小程序遮罩层详解

一、小程序遮罩层滑动

小程序遮罩层是唯一的一层View，它可以在小程序页面中出现，实现遮挡效果，通常用于新手引导、提示框、加载提示等功能。在实际使用中，有时需要在小程序遮罩层中增加滑动效果。

可以通过以下方式实现小程序遮罩层的滑动功能：

//wxml代码
<view class="mask-wrapper">
  <scroll-view scroll-y="{{true}}" class="mask-content">
    <view class="mask-text">
      滑动效果
    </view>
  </scroll-view>
</view>

//css代码
.mask-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .6);
}

.mask-content {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background: #fff;
}

.mask-text {
  height: 2000rpx;
  width: 100%;
  background: #ffffff;
}

其中，将scroll-view的scroll-y设置为true，即可开启滚动效果，同时给scroll-view添加一个class类名mask-content；给遮罩层添加class类名mask-wrapper，设置position为fixed，实现全屏的覆盖效果。

二、小程序遮罩层点击

小程序遮罩层除了可以滑动之外，我们还可以给小程序遮罩层绑定点击事件，以实现点击消失的效果。具体实现代码如下：

//wxml代码
<view class="mask-wrapper" catchtap="maskTap">
  <view class="mask-content">
    <view class="mask-text">
      点击消失
    </view>
  </view>
</view>

//js代码
Page({
  maskTap: function() {
    this.setData({
      isShow: false
    });
  }
});

在小程序遮罩层的View上绑定一个catchtap监听事件maskTap，当点击小程序遮罩层时，触发该事件，通过改变isShow变量状态，实现小程序遮罩层的消失效果。

三、小程序遮罩层透明

小程序遮罩层可以设置透明度，使其更加自然和美观，通常在实现小程序遮罩层时会使用rgba方式设置小程序遮罩层的颜色值。示例代码如下：

//wxml代码
<view class="mask-wrapper">
  <view class="mask-content">
    <view class="mask-text">
      透明效果
    </view>
  </view>
</view>

//css代码
.mask-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
}
.mask-content {
  height: 200rpx;
  width: 200rpx;
  background: #ffffff;
}
.mask-text {
  height: 100%；
  width: 100%;
  background: #ffffff;
}

其中，rgba(0, 0, 0, .5)的数值0.5表示背景颜色的透明度，取值范围为0~1，数值越小，为半透明；数值越大，为不透明。

四、小程序遮罩层引导页

小程序遮罩层可以用于实现引导页功能，在新用户进入小程序时，可以通过小程序遮罩层的引导页面快速了解小程序的使用方法和版权信息。以下代码实现了一种简单的引导页效果：

//wxml代码
<view class="mask-wrapper">
  <swiper autoplay="{{false}}" duration="{{300}}" circular="{{false}}" current="{{current}}" bindchange="swiperChange" style="width: 100%; height: 100%;">
    <swiper-item class="mask-item">
      <view>
        <image src="../../images/guide1.jpg" mode="widthFix"></image>
      </view>
    </swiper-item>
    <swiper-item class="mask-item">
      <view>
        <image src="../../images/guide2.jpg" mode="widthFix"></image>
      </view>
    </swiper-item>
    <swiper-item class="mask-item">
      <view>
        <image src="../../images/guide3.jpg" mode="widthFix"></image>
      </view>
    </swiper-item>
    <view class="mask-close" catchtap="maskClose"></view>
  </swiper>
</view>

<!-- css样式 -->
.mask-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mask-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
}
.mask-close {
  position: absolute;
  top: 40rpx;
  right: 40rpx;
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #ffffff;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
}

通过swiper实现引导页的轮播效果，同时在引导页末尾添加关闭按钮，通过监听maskClose事件，实现小程序遮罩层的关闭效果。

五、小程序遮罩层取消按钮

有时候，需要添加遮罩层取消按钮，类似于引导页中的关闭按钮。以下代码是一种实现方法：

//wxml代码
<view class="mask-wrapper">
  <view class="mask-content">
    <view class="mask-title">
      {{options.title}}
      <view bindtap="close" class="mask-close"></view>
    </view>
    <view class="mask-message">
      {{options.message}}
    </view>
    <view class="mask-btns">
      <button bindtap="confirm">确定</button>
      <button bindtap="cancel">取消</button>
    </view>
  </view>
</view>

//css代码
.mask-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
}

.mask-content {
  height: 250rpx;
  width: 550rpx;
  border-radius: 8rpx;
  margin: 0 auto;
  background: #fff;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.mask-title {
  height: 70rpx;
  line-height: 70rpx;
  font-size: 32rpx;
  text-align: center;
}

.mask-message {
  text-align: center;
  margin: 20rpx;
}

.mask-btns {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 20rpx;
}

.mask-confirm {
  color: #007aff;
}

.mask-close {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  width: 30rpx;
  height: 30rpx;
  background-image: url(../../images/icon_close.png);
  background-position: center center;
  background-size: 100% 100%;
}

通过添加确定和取消按钮实现小程序遮罩层的取消功能，同时在title元素中添加关闭按钮，并绑定close事件，实现弹出框的关闭效果。

六、小程序遮罩层怎么覆盖导航栏

默认情况下，小程序遮罩层无法覆盖导航栏，如果需要将小程序遮罩层覆盖到导航栏上方，可以采用如下方式实现：

//wxml代码
<view class="mask-wrapper" style="position: fixed; top: 0;left: 0;right: 0;bottom: 0;>
  ...
</view>

<!--css代码-->
.page {
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #f8f8f8;
}

将小程序页面的最外层View元素的position属性设置为relative，并将overflow-x和overflow-y的值都设置为hidden，即可实现小程序遮罩层覆盖导航栏的效果。

七、小程序遮罩层避免穿透

在某些情况下，遮罩层下方的页面内容可以通过点击事件穿透到遮罩层下方，影响用户体验。以下是一种解决穿透问题的方法：

// js代码
Page({
  data: {
    isShow: false,
    forbidScroll: false
  },

  showMask: function() {
    this.setData({
      isShow: true,
      forbidScroll: true
    });
  },

  hideMask: function() {
    this.setData({
      isShow: false,
      forbidScroll: false
    });
  }
});

//wxml代码
<view class="mask-wrapper" catchtap="hideMask" wx:if="{{isShow}}">
  <scroll-view class="scroll-view-content" style="{{forbidScroll ? 'height: 100%;' : ''}}" scroll-y="{{!forbidScroll}}" bindtouchmove="preventTouchMove">
    ...
  </scroll-view>
</view>

//css代码
.mask-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.scroll-view-content {
  width: 90%;
  max-height: 90%;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 10rpx;
  overflow: hidden;
}

//js代码
Page({
  data: {
    isShow: false,
    forbidScroll: false
  },

  showMask: function() {
    this.setData({
      isShow: true,
      forbidScroll: true
    });
  },

  hideMask: function() {
    this.setData({
      isShow: false,
      forbidScroll: false
    });
  },

  preventTouchMove: function() {
    if (this.data.forbidScroll) {
      return;
    }
  }
});

避免遮罩层下方内容的穿透通过监听页面的滑动事件，即touchmove，当事件被触发时，判断当前页面是否被禁止滑动，如果是，则不执行任何操作；否则，执行默认操作原则。同时，在遮罩层的scroll-view元素中添加css样式：max-height：90%；overflow: hidden，限制scroll-view元素的高度，并隐藏滚动条，以实现遮罩层下方内容的遮盖效果。

八、小程序遮罩层禁止滚动

在遮罩层出现的情况下，禁止页面滚动是常见的需求。以下