最近剛寫小程序 發(fā)現(xiàn)很多坑 不過先封裝了一些簡單的組件 慢慢用
碼云：https://gitee.com/bestjarvan/public.git
先看效果：
未點(diǎn)擊
點(diǎn)擊效果
用法：
1宽气、把組件放到小程序的根目錄下
2、在需要用的頁面json中寫下下列代碼，路徑根據(jù)自己的真實(shí)路徑修改
{
"usingComponents":{
"button-list": "/components/button-list/button-list"
}
}
3函荣、在頁面中引用組件
//wxml
<button-list
bind:myevent="buttonClick" //綁定點(diǎn)擊事件
wx:for="{{listArr}}" //如果列表多的話府框，可以循環(huán)展示
text="{{item.name}}" //顯示的列表名字
img="{{item.img}}" //名字前的圖標(biāo)，若不傳 默認(rèn)隱藏 只顯示文字
//hideRight="1" //hideRight 是否顯示右邊的>號 傳任意值隱藏
></button-list>
//js
//如果使用循環(huán)
listArr:[
{
name:'我的會員卡',
img:'/utils/img/my_01@3x.png'
},
{
name:'聯(lián)系客服',
img:'/utils/img/my_02@3x.png'
}]
buttonClick:(e) => {
//點(diǎn)擊事件點(diǎn)擊之后 e.detail.type == 傳入組件的text值
console.log(e.detail.type);
switch (e.detail.type){
case '我的會員卡':
//...
break;
//....
}
