小程序遮罩层开发技巧

来深圳入职新公司的第一天，在熟悉公司项目代码时发现了一些问题，

代码略显臃肿，没有太多的组件化，其中一个功能中为了让遮罩层全屏遮罩，放弃了官方的tabbar，将底部三个tab页面，写在了一个home页中，导致该页面非常庞大，维护数据特别大，同时导致自己熟悉代码进度缓慢，就遮罩层这块，之前自己有在项目中使用，有几个技巧。

以下方案为折中方案，缺点是在显示遮罩时看不到遮罩下边的tabbar，具体需求具体解决吧！

1.在显示遮罩的同时先关闭底部tab栏，在隐藏遮罩的同时先显示tab栏

js部分

showMask: function(){
    let _this =this
    wx.hideTabBar({
      success(){
        _this.setData({
          showMaskType: true
        })
      }
    })
  },
  hideMask: function () {
    let _this = this
    wx.showTabBar({
      success() {
        _this.setData({
          showMaskType: false
        })
      }
    })
  },

html部分

<view class="show-mask" bindtap="showMask">显示遮罩</view>
<view class="mask" wx:if="{{showMaskType}}" bindtap="hideMask" ></view>

css部分

.mask{
  position: fixed;
  z-index:999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  height:100%;
  width: 100%;
  background: rgba(8, 18, 28, 0.3)
}

2.在遮罩层完成后会发现，如果页面本身高度大于100Vh（屏幕高度）会出现页面级滚动事件，此时尽管遮罩层在上，但是可以透过遮罩层看到下边内容滚动，解决方案有两种：

1.在遮罩层上用catchtouchmove事件（capture-catch:touchmove）拦截页面级的滚动事件

<view class="mask" wx:if="{{showMaskType}}" bindtap="hideMask" catchtouchmove="preventTouchMove"></view>
或
<view class="mask" wx:if="{{showMaskType}}" bindtap="hideMask" capture-catch:touchmove="preventTouchMove"></view>

js

preventTouchMove: function () {
    console.log('stop user scroll it!');
    return;
}

2.在显示遮罩层的时候让页面高度强制显示为100vh

html

<view class="page"  class="{{showMaskType?'pageTo100':''}}">
   <view class="show-mask" bindtap="showMask">显示遮罩</view>
   <view class="mask" wx:if="{{showMaskType}}" bindtap="hideMask" ></view>
</view>

.pageTo100{
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  z-index: 0;
}

3.遮罩层为弹窗父元素，防止子元素点击冒泡到父元素上

    也许你此时回发现在上边我的mask遮罩层与弹窗是分开的，并没有使用mask去包含弹窗，是因为在点击弹窗上按钮时触发事件会冒泡到父元素上，其实这里也有技巧

<view class="mask" bindtap="hideMask">
     <view class="toast"  catchtap="click" >
     </view>
</view>

在mask子元素上没有使用bindtap  而是使用了catchtap，这是小程序提供的防止冒泡事件的点击事件
此时你会发现点击弹窗按钮事件并不会冒泡到父元素mask上了