小程序實現頁面給自定義組件賦值

第小程序實現頁面給自定義組件賦值本文實例為大家分享了小程序之頁面給自定義組件賦值的具體代碼，供大家參考，具體內容如下

1.新建組件：在component下新建一個tabBar

2.組件中的index.wxml結構如下：

cover-view

cover-view/cover-view

cover-viewwx:for="{{list}}"wx:key="index"data-path="{{item.pagePath}}"data-index="{{index}}"bindtap="tabChange"

cover-imagesrc="{{tabbarIndex===indexitem.selectedIconPath:item.iconPath}}"/cover-image

cover-view{{item.text}}/cover-view

/cover-view

/cover-view

3.組件中的index.js結構如下：

Component({

/**

1.組件的屬性列表

*/

options:{

multipleSlots:true//在組件定義時的選項中啟用多slot支持

properties:{

list:{//屬性名

type:Array,

value:[]

},

selectedColor:{//屬性名

type:String,

value:''

},

color:{//屬性名

type:String,

value:''

},

/**

2.組件的初始數據

*/

data:{

tabbarIndex:0//默認顯示第一個tab元素

lifetimes:{

attached(){}

/**

3.組件的方法列表

*/

methods:{

//組件的點擊事件

tabChange(e){

//獲取到底部欄元素的下標

letindex=e.currentTarget.dataset.index;

this.setData({

tabbarIndex:index,

})

})

4.組件中的index.json結構如下：

{

"component":true,

"usingComponents":{}

}

5.組件的引用：在頁面pages/index/index.json中加入

{

"navigationBarTitleText":"測試",

"usingComponents":{

"mp-tabbar":"../components/tabBar/index"

}

6.在頁面pages/index/index.wxml中加入

viewwx:if="{{tabbarIndex==0}}"111111/view

viewwx:if="{{tabbarIndex==1}}"222222/view

viewwx:if="{{tabbarIndex==2}}"333333/view

mp-tabbarlist="{{list}}"id='tabComponent'bind:onMyEvent="switchTab"/mp-tabbar

7.在頁面pages/index/index.js中加入

data:{

tabbarIndex:0,//默認顯示市場

color:"#555555",

selectedColor:"#2ea7e0",

//底部欄

items:[{

"text":"市場",

"iconPath":"/images/bazaar.png",

"selectedIconPath":"/images/tselected.png",

},

{

"text":"充值",

"iconPath":"/images/recharge.png",

"selectedIconPath":"/images/recharge_selected.png",

},{

"text":"車隊",

"iconPath":"/images/market.png",

"selectedIconPath":"/images/market_selected.png",

}

]

onShow:function(){

this.tabComponent=this.selectComponent('#tabComponent');

letselectedColor=this.data.selectedColor;

letcolor=this.data.color;

this.tabComponent.setData({

selectedColor:selectedColor,

color:col