您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了微信小程序如何實現漂亮的彈窗效果,內容簡而易懂,希望大家可以學習一下,學習完之后肯定會有收獲的,下面讓小編帶大家一起來看看吧。
最近項目里需要實現一個帶著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 }) } })
需要注意的地方
以上就是關于微信小程序如何實現漂亮的彈窗效果的內容,如果你們有學習到知識或者技能,可以把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。