Half Screen Dialog

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

代码引入

在 page.json 中引入组件

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

示例代码

  1. <!--WXML示例代码-->
  2. <mp-half-screen-dialog
  3. bindbuttontap="buttontap"
  4. show="{{show}}"
  5. maskClosable="{{false}}"
  6. title="测试标题B"
  7. subTitle="测试标题B的副标题"
  8. desc="辅助描述内容,可根据实际需要安排"
  9. tips="辅助提示内容,可根据实际需要安排"
  10. buttons="{{buttons}}"
  11. ></mp-half-screen-dialog>
  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[]辅助操作按钮列表

自定义事件

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

Slot

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