Half Screen Dialog

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

创新互联公司主要从事成都网站设计、成都做网站、外贸网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务双峰,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

代码引入

在 page.json 中引入组件

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

示例代码

Open

// 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

新闻标题：创新互联小程序教程：微信小程序WeUI·半屏弹窗
URL标题：https://chengdu.cdxwcx.cn/article/ccdospj.html