1.编写wxml结构文件

<!-- 遮罩层 -->
<view class="mask" style="display: {{maskState}};"></view>
<!-- 显示结构 -->
<view class= "mask-content" style-"display: {{maskState}}">
    遮罩层上显示的结构
</view>

2.编写对应的wxss样式文件

.mask {
  display: none;
  position: absolute;
  width: 100%;
  height: 190%;
  top: 0%;
  left: 0%;
  background-color: black;
  opacity: .7;
  z-index: 100;

}
.mask-content{
  display: none;
  position: fixed;
  background-color: white;
  bottom: 0rpx;
  left: 0rpx;
  width: 100%;
  height: 320rpx;
  z-index: 101;
  overflow: auto;
}

3.在页面的.js文件中设置data，定义遮罩层显示/隐藏的状态

Page({
    data:{
        maskState: '', //定义遮罩层的初始状态
    }，
    // 打开遮罩层函数，改变遮罩层状态
    openMaskHandler(){
        this.setData({ maskState: 'block' })
    },
    // 关闭遮罩层函数，该百年遮罩层状态
    closeMaskHandler(){
        this.setData({ maskState: 'none' })
    }
})

4.实现思路

1.初始时设置遮罩层结构样式隐藏(通过wxss中使用display: block/none 控制结构的隐藏)

2.在结构样式上使用style标签接收页面.js传递过来的值(显示/隐藏),style设置样式的优先级大于元素选择器的样式

3.通过事件函数改变遮罩层显示/隐藏的状态