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