點擊右上方紅色按鈕關注“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組件實現的全部代碼,看起來是不是很簡單了,趕緊自己動手試試吧,沒有你想象的那麼難!!!
公告
更多資源敬請關注!
閱讀更多 web秀 的文章