使用原生小程序写一个遮罩层

今天写小程序的时候，需求是要在首页做一个弹框，做活动提醒，找了一遍小程序（主要对小程序的文档不熟悉），找了一会，发现没有想要的遮罩层，于是就在度娘上找文章，结果找到一篇文章，发现有的比较冗余，所以自己整理了一下：

先看效果：

 

 

wxml：
 

<view class='modal-mask' wx:if='{{showMask}}'>
    <view class='modal-content'>
        <!-- 这边就是放置展示的内容，可以是swiper组件或者是其他内容，我这里用了自己定义的banner组件 -->
        <banners list="{{list}}" bindbannerTap="bannerTap"></banners>
    </view>
    <view class='modal-footer'>
        <!-- 这边用的是一个字体图标，也是在网上找到的（小程序文档没找到） -->
        <icon type="cancel" catchtap="cancel" size="44" color="white"></icon>
    </view>
</view>

js：

data: {
    list: [],//存放banner数据的
    showMask: true, // 显示modal弹窗
},
// 点击取消按钮的回调函数
cancel() {
    console.log('cancel')
    this.setData({
        showMask: false
    })
},
//轮播图点击
bannerTap(e) {
   console.log(e)
},

wxss:

/*遮罩层*/
.modal-mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* 内容部分 */
.modal-content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/*底部按钮*/
.modal-footer {
    position: relative;
    top: 41%;
    text-align: center;
}

注意：这种效果没有阻止滚动条滚动，也就是说，在遮罩层的情况下，其下方的内容还是可以滚动查看的。但是在小程序端查看的时候，用户一般是点击了取消按钮或者是点击查看才对。