微信小程序圖片遮罩層demo

在工作中經常會用到遮罩層彈窗，所以簡單分享一下，之前寫過的一個彈出廣告圖片遮罩層功能demo。

（一）實現效果

（二）實現過程

實現過程主要是設置css樣式，比較容易理解。
1、設置wxml代碼佈局：設置一個背景佈局：用來顯示灰色背景；嵌套一個顯示展示圖片容器，嵌套一個顯示閉關按鈕的容器。

   <view class="b1" hidden="{{flag}}">
        <view class="b2">
            <image src='../../images/test.jpg'/>
        </view>
          <view class="t_w">
           <cover-view class="t_image" bindtap="closeMask">
             <cover-image  src="../../images/qcm.png"></cover-image>
            </cover-view>
          </view>
    </view>

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 })
  },
})

（三）完整代碼

代碼下載