微信小程序之遮罩功能实现

1.放一个空div，作为遮罩层最外层

 <view class='mask' v-if="{{flag}}"></view>

2.写这个遮罩层样式

.mask{
  width:100%;
  height:100%;
  position:absolute;
  background-color:#999;
  z-index:9999;
  top:0;
  left:0;
  opacity:0.5;
}

其中颜色可以任选，透明度也可以任选。
兼容处理：

-moz-opacity: 0.7;
opacity: 0.70;
filter: alpha(opacity=70);

3.控制显示还是隐藏

用v-if或者hiddle的true和false来控制遮罩的显示或者隐藏，当flag设置为false时，隐藏；为true时，显示

// 遮罩层显示
  show: function () {
    this.setData({ flag: false })
  },
  // 遮罩层隐藏
  conceal: function () {
    this.setData({ flag: true })
  },

微信小程序之遮罩功能实现

原文：https://www.cnblogs.com/jessie-xian/p/11571642.html