微信小程序实现漂亮的弹窗效果
30 浏览量
2020-08-27
05:51:22
上传
评论 2
收藏 48KB PDF 举报
微信小程序实现漂亮的弹窗效果微信小程序实现漂亮的弹窗效果
主要为大家详细介绍了微信小程序实现漂亮的弹窗效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一
下
最近项目里需要实现一个带着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() {
评论0
最新资源