微信小程序 WeUI·半屏弹窗

Half Screen Dialog

半屏弹窗，辅助完成当前页面任务时；提醒用户并引导用户的下一步操作；用户主动发起的任务时。

代码引入

在 page.json 中引入组件

{
  "usingComponents": {
    "mp-halfScreenDialog": "../../components/half-screen-dialog/half-screen-dialog"
  }
}

示例代码

<!--WXML示例代码-->
<mp-halfScreenDialog 
  bindbuttontap="buttontap"
  show="{{show}}"
  maskClosable="{{false}}" 
  title="测试标题B" 
  subTitle="测试标题B的副标题"
  desc="辅助描述内容，可根据实际需要安排"
  tips="辅助提示内容，可根据实际需要安排"
  buttons="{{buttons}}"
></mp-halfScreenDialog>
<button class="weui-btn" type="primary" bindtap="open">Open</button>

// page.js示例代码
Page({
    data: {
        show: false,
        buttons: [
            {
                type: 'default',
                className: '',
                text: '辅助操作',
                value: 0
            },
            {
                type: 'primary',
                className: '',
                text: '主操作',
                value: 1
            }
        ]
    },
    open: function () {
        this.setData({
            show: true
        })
    },
    buttontap(e) {
        console.log(e.detail)
    }
});

效果展示

属性列表

自定义事件

Slot