微信小程序 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)
    }
});

效果展示

属性列表

属性 类型 默认值 说明
extClass string 组件类名
closabled boolean true 是否展示关闭按钮
title string 组件标题,可通过slot自定义
subTitle string 组件副标题,可通过slot自定义
desc string 辅助操作描述内容
tips string 辅助操作提示内容
maskClosable boolean true 点击遮罩是否关闭改组件
mask boolean true 是否需要遮罩层
show boolean true 是否开启弹窗
buttons array [] 辅助操作按钮列表

自定义事件

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

Slot

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

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《微信小程序 WeUI·半屏弹窗》
文章链接:https://zhuji.vsping.com/311991.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。