支付宝小程序引导组件 背景蒙层·Mask
可用于需要遮罩蒙层的弹层元素。
扫码体验
示例代码
{
"defaultTitle": "Mask",
"usingComponents": {
"mask": "mini-ali-ui/es/mask/index"
}
}
<mask type="{{type}}" show="{{show}}" maskZindex="{{maskZindex}}" onMaskTap="maskClick"></mask>
Page({
data: {
type: 'market',
maskZindex: 10,
},
maskClick() {
if (this.data.type === 'market') {
this.setData({
type: 'product',
});
} else {
this.setData({
type: 'market',
show: false,
});
}
},
});属性
| 属性 | 类型 | 默认值 | 描述 | 必填 | 最低版本 |
|---|---|---|---|---|---|
| type | String | product | 显示不同透明度的蒙层。可选值：product：产品弹窗类型蒙层，透明度 0.55；market：市场营销弹窗类型蒙层，透明度 0.75。 | - | - |
| maskZindex | Number | - | 自定义蒙层的 z-index 层级。 | - | - |
| show | Boolean | - | 是否显示蒙层。 | - | - |
| onMaskTap | EventHandle | () => { } | 蒙层点击事件。 | - | - |
| fixMaskFull | Boolean | false | 用以解决遮罩层受到 transform 影响而显示不全的问题。 | - | 1.0.11 |