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

效果展示

属性列表

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

自定义事件

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

Slot

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



标签:微信小程序

相关阅读 >>

微信小程序 页面配置

微信小程序 weui顶部错误提示组件

微信小程序 性能trace工具

微信小程序 运维中心getscenelist

微信小程序 安全指引-开发原则与注意事项

微信小程序api 文件-保存文件系统的文件到用户磁盘

微信小程序 运力方使用onorderadd

微信小程序 weui确认页样式

微信小程序云开发 多端支持

微信小程序api-设备-系统信息

更多相关阅读请进入《微信小程序》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    正在狠努力加载,请稍候...