微信小程序 WeUI·半屏彈窗

Half Screen Dialog

半屏彈窗，輔助完成當(dāng)前頁(yè)面任務(wù)時(shí)；提醒用戶并引導(dǎo)用戶的下一步操作；用戶主動(dòng)發(fā)起的任務(wù)時(shí)。

代碼引入

在 page.json 中引入組件

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

示例代碼

<!--WXML示例代碼-->
<mp-halfScreenDialog 
  bindbuttontap="buttontap"
  show="{{show}}"
  maskClosable="{{false}}" 
  title="測(cè)試標(biāo)題B" 
  subTitle="測(cè)試標(biāo)題B的副標(biāo)題"
  desc="輔助描述內(nèi)容，可根據(jù)實(shí)際需要安排"
  tips="輔助提示內(nèi)容，可根據(jù)實(shí)際需要安排"
  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