mask

遮罩。

效果展示

示例代码

WXML

<view class="page">
    <view class="page__hd">
        <text class="page__title">mask</text>
        <text class="page__desc">遮罩</text>
    </view>
    <view class="page__bd">
        <view class="btn-area">
            <view class="body-view">
                <mask hidden="{{hidden1}}" bindtap="mask1" hover-style="none"/>
                <button type="default" bindtap="tap1">点击弹出默认mask</button>
            </view>

            <view class="body-view">
                <mask hidden="{{hidden2}}" bindtap="mask2" style="background-color: rgba(255,255,0,0.6);" hover-style="none"/>
                <button type="default" bindtap="tap2">点击弹出半透明颜色的mask</button>
            </view>

            <view class="body-view">
                <mask hidden="{{hidden3}}" bindtap="mask3" style="background-color: rgb(0,255,0);" hover-style="none"/>
                <button type="default" bindtap="tap3">点击弹出纯色mask</button>
            </view>

            <view class="body-view">
                <mask hidden="{{hidden4}}" bindtap="mask4" style="z-index: 100;" hover-style="none"/>
                <button type="default" bindtap="tap4"  style="z-index: 130;">点击弹出设置z-index的mask</button>
            </view>
        </view>
    </view>
</view>

JS

var pageData = {}
var maskNum = 4
pageData.data = {}
for(var i = 1; i <= maskNum; ++i) {
  pageData.data[`hidden${i}`] = true;

  (function(index) {
    pageData[`tap${index}`] = function(e) {
      var obj = {}
      obj[`hidden${index}`] = false
      this.setData(obj)
    }
    pageData[`mask${index}`] = function(e) {
      var obj = {}
      obj[`hidden${index}`] = true 
      this.setData(obj)
    }
  })(i);
}
Page(pageData)

API

属性	类型	默认值	必填	说明
hidden	boolean	false	否	是否显示组件

多平台支持

属性	平台支持
hidden

注释：

支付宝不支持该组件