微信小程序自定義模態(tài)彈窗插件

發(fā)布時(shí)間：2018-04-25 11:07 所屬欄目：小程序開(kāi)發(fā)教程

最近在寫(xiě)微信小程序的時(shí)候用到了模態(tài)彈窗，但是發(fā)現(xiàn)微信官方給的wx.showModal(OBJECT)可自定義性還是太少，滿(mǎn)足不了某些情況下的需求。

比如，用戶(hù)點(diǎn)擊了蒙層，而不是點(diǎn)擊取消按鈕，彈窗也會(huì)去執(zhí)行取消事件，并且將彈窗關(guān)閉。文檔里并沒(méi)有屏蔽蒙層點(diǎn)擊事件的屬性，也沒(méi)有辦法通過(guò)其他的方式去屏蔽。

所以就寫(xiě)了一個(gè)可隨意自定義的第三方彈窗插件【wxPopup】

使用方法也很簡(jiǎn)單，在要調(diào)用彈窗的位置使用this.showModel()方法，傳入一些參數(shù)，就可以將彈窗顯示出來(lái)。

this.showModel({
ModelId: 1,
ModelTitle: '標(biāo)題(2)',
ModelContent: '感謝使用wxPoput自定義模態(tài)彈窗,一個(gè)可以隨意自定義樣式的微信小程序彈窗插件。已經(jīng)開(kāi)源到GitHub上。'
})

彈窗的取消事件

//取消事件
ancel: function(e){
if (e.currentTarget.dataset.modelid == 0){
console.log("用戶(hù)點(diǎn)擊了取消(1)")
} else if (e.currentTarget.dataset.modelid == 1){
console.log("用戶(hù)點(diǎn)擊了取消(2)")
}
}

彈窗的確定事件

//確定事件
confirm: function(e){
if (e.currentTarget.dataset.modelid == 0) {
console.log("用戶(hù)點(diǎn)擊了確定(1)")
} else if (e.currentTarget.dataset.modelid == 1) {
console.log("用戶(hù)點(diǎn)擊了確定(2)")
}
//關(guān)閉模態(tài)彈窗
this.setData({
isShowModel: false
})
}

可以通過(guò)判斷e.currentTarget.dataset.modelid執(zhí)行對(duì)應(yīng)彈窗的事件

彈窗的顯示邏輯就是這樣，然后樣式的話(huà)大家可以隨意自定義，相信大家可以玩出更多的花樣。

最后喜歡這個(gè)插件的話(huà)就給點(diǎn)個(gè)贊唄！

易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源碼云倉(cāng)庫(kù):

本文地址：http://m.chqfk.com/wxmini/doc/course/24071.html 復(fù)制鏈接如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún)：點(diǎn)擊咨詢(xún)

免責(zé)聲明：本站所有文章和圖片均來(lái)自用戶(hù)分享和網(wǎng)絡(luò)收集，文章和圖片版權(quán)歸原作者及原出處所有，僅供學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途，如果損害了您的權(quán)利，請(qǐng)聯(lián)系網(wǎng)站客服處理。

小程序模板網(wǎng)

微信小程序自定義模態(tài)彈窗插件

產(chǎn)品

服務(wù)

幫助

關(guān)于