• Half Screen Dialog
    • 代码引入
    • 示例代码
    • 效果展示
    • 属性列表
    • 自定义事件
    • Slot

    Half Screen Dialog

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

    代码引入

    在 page.json 中引入组件

    1. {
    2.   "usingComponents": {
    3.     "mp-halfScreenDialog": "../../components/half-screen-dialog/half-screen-dialog"
    4.   }
    5. }

    示例代码

    1. <!--WXML示例代码-->
    2. <mp-halfScreenDialog 
    3.   bindbuttontap="buttontap"
    4.   show="{{show}}"
    5.   maskClosable="{{false}}" 
    6.   title="测试标题B" 
    7.   subTitle="测试标题B的副标题"
    8.   desc="辅助描述内容，可根据实际需要安排"
    9.   tips="辅助提示内容，可根据实际需要安排"
    10.   buttons="{{buttons}}"
    11. ></mp-halfScreenDialog>
    12. <button class="weui-btn" type="primary" bindtap="open">Open</button>
    1. // page.js示例代码
    2. Page({
    3.     data: {
    4.         show: false,
    5.         buttons: [
    6.             {
    7.                 type: 'default',
    8.                 className: '',
    9.                 text: '辅助操作',
    10.                 value: 0
    11.             },
    12.             {
    13.                 type: 'primary',
    14.                 className: '',
    15.                 text: '主操作',
    16.                 value: 1
    17.             }
    18.         ]
    19.     },
    20.     open: function () {
    21.         this.setData({
    22.             show: true
    23.         })
    24.     },
    25.     buttontap(e) {
    26.         console.log(e.detail)
    27.     }
    28. });

    效果展示

    HalfScreenDialog - 图1

    属性列表

    属性类型默认值说明
    extClassstring组件类名
    closabledbooleantrue是否展示关闭按钮
    titlestring组件标题，可通过slot自定义
    subTitlestring组件副标题，可通过slot自定义
    descstring辅助操作描述内容
    tipsstring辅助操作提示内容
    maskClosablebooleantrue点击遮罩是否关闭改组件
    maskbooleantrue是否需要遮罩层
    showbooleantrue是否开启弹窗
    buttonsarray[]辅助操作按钮列表

    自定义事件

    事件名称说明回调参数
    buttontap点击辅助操作按钮时触发e.detail = { index, item }
    close组件关闭时候触发

    Slot

    名称描述
    title组件自定义标题栏
    desc组件自定义操作描述
    footer操作按钮区域slot