微信小程序：自定义弹出层

转载

Q神 2022-07-22 18:17:47 博主文章分类：小程序

文章标签 模态点击事件小程序 文章分类 后端开发

最近项目里需要实现一个带着logo的美美哒弹窗，可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西……
场面一度十分尴尬
可是得做啊，要不然产品大姐又要暴走了……
好吧，来研究一下模态对话框的性质自己DIY吧~

实现思路

模态对话框之所以被叫做“模态”，就是因为在它弹出的时候，用户如果不关闭这个对话框，是无法对其他窗口进行操作的。

那么这样一来，我们的思路就很明确了：

1. 构建一个蒙层（mask），使得背景变暗，并且阻止用户对对话框外界面的这里写代码片点击事件；

2. 构建一个对话框，在需要时弹出即可（弹出同时触发蒙层）。

示例代码

.wxml：

<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>

<view class="modalDlg" wx:if="{{showModal}}">
    <image src="/figures/logo-smile.png"/>
    <text>欢迎来到模态对话框~</text>
    <button bindtap="go">点我可以关掉对话框</button>
</view>

<button bindtap="submit">点我弹窗</button>

.wxss：

.mask{
    width:100%;
    height:100%;
    position: fixed;
    top:0;
    left:0;
    background:#000;
    z-index:9000;
    opacity:0.7;
}

.modalDlg{
    width:580rpx;
    height:620rpx;
    position: fixed;
    top:50%;
    left:0;
    z-index:9999;
    margin:370rpx 85rpx;
    background-color:#fff;
    border-radius:36rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.js：

Page({

    data: {
        showModal: false
    },

    submit: function()
        this.setData({
        showModal: true
        })
    },

    preventTouchMove: function()

    },


    go: function() 
        this.setData({
        showModal: false