您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了微信小程序如何實現(xiàn)漂亮的彈窗效果,內(nèi)容簡而易懂,希望大家可以學習一下,學習完之后肯定會有收獲的,下面讓小編帶大家一起來看看吧。
最近項目里需要實現(xiàn)一個帶著logo的美美噠彈窗,可是翻遍小程序的文檔也只能見到wx.showModal這個丑丑的東西……
場面一度十分尷尬
可是得做啊,要不然產(chǎn)品大姐又要暴走了……
好吧,來研究一下模態(tài)對話框的性質(zhì)自己DIY吧~
實現(xiàn)思路
模態(tài)對話框之所以被叫做“模態(tài)”,就是因為在它彈出的時候,用戶如果不關(guān)閉這個對話框,是無法對其他窗口進行操作的。
那么這樣一來,我們的思路就很明確了:
1. 構(gòu)建一個蒙層(mask),使得背景變暗,并且阻止用戶對對話框外界面的這里寫代碼片點擊事件;
2. 構(gòu)建一個對話框,在需要時彈出即可(彈出同時觸發(fā)蒙層)。
示例代碼
.wxml:
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view> <view class="modalDlg" wx:if="{{showModal}}"> <image src="/figures/logo-smile.png"/> <text>歡迎來到模態(tài)對話框~</text> <button bindtap="go">點我可以關(guān)掉對話框</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 }) } })
需要注意的地方
以上就是關(guān)于微信小程序如何實現(xiàn)漂亮的彈窗效果的內(nèi)容,如果你們有學習到知識或者技能,可以把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。