网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網(wǎng)

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

發(fā)布時(shí)間:2018-04-26 11:54 所屬欄目:小程序開發(fā)教程

思路:

1.在組件wxml文件里實(shí)現(xiàn)布局、數(shù)據(jù)綁定、事件綁定;

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

4.數(shù)據(jù)傳遞。在引用文件對(duì)應(yīng)的js里定義要傳遞的數(shù)據(jù),數(shù)據(jù)名稱與組件wxml文件里的一致;

5.函數(shù)映射。在引用文件對(duì)應(yīng)的js里import組件js對(duì)象,并將相應(yīng)事件映射過來,映射名須與函數(shù)名一致。

 

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

效果圖:

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

1.components

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

 

js: 定義了一個(gè)yesIKonw事件來控制關(guān)閉蒙蔽層

 

2.引用頁面

wxml: 通過include引入公共組件

js: 定義要傳遞的數(shù)據(jù)值(flag、alertInfo),并映射函數(shù)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 */  //這個(gè)是禁止styleint檢測(cè)的語句
z-index: 1;
}


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/24098.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢
AI智能客服 ×