创新互联小程序教程:微信小程序WeUI·半屏弹窗

Half Screen Dialog

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

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

代码引入

在 page.json 中引入组件

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

示例代码




// 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·半屏弹窗
网站路径:http://www.shufengxianlan.com/qtweb/news43/105293.html

成都网站建设公司_创新互联,为您提供做网站品牌网站建设手机网站建设定制网站网站制作软件开发

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联