微信小程序公共組件的引用與控制


思路:

1.在組件wxml文件里實現布局、數據綁定、事件綁定;

2.組件js文件里定義事件,並將文件所有內容作為一個對象export出去;
3.在引用的文件引入組件(方式有兩種,一個是用include引入,一個是import引入,詳情:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/import.html);

4.數據傳遞。在引用文件對應的js里定義要傳遞的數據,數據名稱與組件wxml文件里的一致;

5.函數映射。在引用文件對應的js里import組件js對象,並將相應事件映射過來,映射名須與函數名一致。

 

例子:公用組件為一個蒙版彈窗,提示內容各頁面也有差異,以其中一個為例

效果圖:

代碼(樣式部分的代碼就不貼了=.=)

1.components

wxml: (如果要用import方式引入組件,則wxml文件需將template作為根元素)

 

js: 定義了一個yesIKonw事件來控制關閉蒙蔽層

 

2.引用頁面

wxml: 通過include引入公共組件

js: 定義要傳遞的數據值(flag、alertInfo),並映射函數yesIKnow,使得在引用頁可控制蒙版組件的展示與隱藏。

 

PS:

1.需在引用頁的wxss文件里引入公共組件的樣式wxss文件

@import "../components/promptBox/index.wxss";
2.蒙版樣式:
.mask {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background: rgba(0, 0, 0, 0.4);
overflow: hidden;
/* stylelint-disable */  //這個是禁止styleint檢測的語句
z-index: 1;
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM