微信小程序实现蒙层 点击空白处蒙层消失

通过对蒙层wxss样式display：none/bolck转换实现

wxml

<!-- 按钮 -->
<view>
	<!-- 点击按钮展现蒙层 show：true -->
	<button class="flex" catchtap="showType">新增题目</button>
</view>	
<!-- 蒙层 -->
	<!-- 点击空白处蒙层重新隐藏 show:false class:hide -->
  	<view class="{{style?'hide':'show'}}" wx:if="{{show}}" catchtap="hideType">
	<!-- 蒙层内容 点击蒙层内容实现跳转 -->
  </view>

js

  data: {
    show:false,
    style:false
  },
  showType(e){
    this.setData({
      show:true
    })
  },
  hideType(e) {
    this.setData({
      show: false
    })
  },

wxss

.show{
  display: block;
}

.hide{
  display: none;
}