微信小程序实现漂亮的弹窗效果

微信小程序实现漂亮的弹窗效果

最近项目里需要实现一个带着logo的美美哒弹窗，可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西……

场面一度十分尴尬

可是得做啊，要不然产品大姐又要暴走了……

好吧，来研究一下模态对话框的性质自己DIY吧~

实现思路

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

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

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

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

示例代码

.wxml：

欢迎来到模态对话框~

点我可以关掉对话框

点我弹窗

.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

})

}

})

需要注意的地方

蒙层view中绑定的preventTouchMove函数是一个空函数，使用了catch事件，目的就是阻止touchmove这样一个冒泡事件继续向下传递。

蒙层的wxss样式中，指定其大小为100%以占满整个屏幕。

模态对话框与蒙层的wxss样式中均有z-index属性，为的是保证对话框始终浮在蒙层的上方（即对话框的z-index始终要比蒙层的大）

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。