微信小程序图片遮罩层demo

（一）实现效果

（二）实现过程

实现过程主要是设置css样式，比较容易理解。
1、设置wxml代码布局：设置一个背景布局：用来显示灰色背景；嵌套一个显示展示图片容器，嵌套一个显示闭关按钮的容器。

2、wxss样式设置：

/* 设置背景遮罩层样式 */
.b1 {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
/* 设置展示图片大小 */
.b2 {
  width: 50%;
  height: 50%;
}
/* 设置展示图片与关闭按钮图片的距离 */
.t_w {
  margin-top: 20rpx;
}
/* 设置关闭按钮图片显示的大小 */
.b2 image {
  width: 100%;
  height: 100%;
}
/* 设置关闭按钮宽高 */
.t_image {
  width: 60rpx;
  height: 60rpx;
}

3、 js两个方法控制显示与关闭操作：

 data: {
    motto: '微信遮罩层显示',
   flag: true,
  },
  showMask:function(){
    this.setData({ flag: false })
  },
  closeMask: function () {
    this.setData({ flag: true })
  },
})