微信小程序實現漂亮的彈窗效果

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    })  }})

需要注意的地方