如何设置小程序背景蒙层Mask_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

深色背景层，常用于模态窗口的背景层，使视觉焦点突出在模态窗口本身。

属性

属性	类型	默认值	说明
maskZindex	string	-	遮罩层层级
type	'product' \| 'market'	'product'	类型
show	boolean	-	是否显示
fixMaskFull	boolean	false	是否通过修正实现全屏显示，默认false（不修复）
className	string	-	类名

事件

事件名	说明	类型
onMaskTap	遮罩点击事件	`(v: Record<string, any>) => void`

CSS 变量

CSS 变量名称

--am-mask-backgroundColor

--am-mask-market-backgroundColor

样式类

类名

amd-mask

amd-mask__m

amd-mask__fix

代码示例

基本使用

index.axml 的代码示例如下：

<mask type="{{type}}" show="{{show}}" maskZindex="{{maskZindex}}" onMaskTap="handleClickMask" />
<demo-block title="基础用法">
    <view class="btn-list">
        <button data-type="product" onTap="handleClickBtn">显示product类型的遮罩层</button>
        <button data-type="market" onTap="handleClickBtn">显示market类型的遮罩层</button>
    </view>
</demo-block>

index.js 的代码示例如下：

Page({
  data: {
    type: 'market',
    maskZindex: 10,
    show: false,
  },
  handleClickMask() {
    this.setData({ show: false });
  },
  handleClickBtn(e) {
    const { type } = e.target.dataset;
    this.setData({ type, show: true });
  },
});

index.json 的代码示例如下：

{
  "defaultTitle": "Mask",
  "usingComponents": {
    "mask": "antd-mini/es/Mask/index",
    "demo-block": "../../components/DemoBlock/index",
    "button": "antd-mini/es/Button/index"
  }
}