支付宝小程序引导组件 背景蒙层·Mask

2020-09-18 11:22 更新

可用于需要遮罩蒙层的弹层元素。

扫码体验

示例代码

{
  "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
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号