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

2019-11-19 13:31:38

字体：大中小

来源：转载

供稿：网友

最近项目里需要实现一个带着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    })  }})

需要注意的地方