创新互联小程序教程：微信小程序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)
    }
});

效果展示

属性列表

属性	类型	默认值	说明
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·半屏弹窗
网站路径：http://www.hantingmc.com/qtweb/news43/105293.html

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

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

猜你还喜欢下面的内容