微信小程序popup組件你會了嗎?

點擊右上方紅色按鈕關注“web秀”,讓你真正秀起來!


前言

注意: 下方popup 組件語法使用原生小程序,copy需做調整

popup主要用來顯示了一個彈出式窗口,其中列出了可用的用戶管理屬性


組件功能實現介紹

wxml實現部分

isShowPop用來控制組件的顯示和隱藏needTitle和title分別是兩種title的樣式



js實現部分

詳細請看下方註釋


css實現部分

只寫了組件的公共樣式部分,slot內容寫到具體頁面了


組件調用實現介紹

wxml實現部分

popup組件引入後調用isShowPop是傳入子組件的屬性,控制是否顯示bindcancel、bindconfirm是傳入子組件的方法,用this.triggerEvent('xxx')等方法調用,pCancel、pConfirm是this.triggerEvent('xxx')調用的執行的具體方法slot對應組件 slot name="after"



js實現部分

詳細請看下方註釋


css實現部分

這裡引入了Iconfont-阿里巴巴矢量圖標庫,點擊查看


上述就是一個微信小程序pop組件實現的全部代碼,看起來是不是很簡單了,趕緊自己動手試試吧,沒有你想象的那麼難!!!

公告

更多資源敬請關注!