⼩程序之页⾯获取⾃定义组件中的值
1. 新建组件：在component下新建⼀个tabBar
2. 在组件的index.wxml中写如下代码：
<cover-view class="tab-bar">
<cover-view class="tab-bar-border"></cover-view>
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="tabChange">  <cover-image src="{{tabbarIndex === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view >{{}}</cover-view>
</cover-view>
</cover-view>
3. 在组件的index.js中写如下代码：
Component({
properties: {
list: {
type: Array,
value: []
},
selectedColor:{
type: String,
value:''
},
color:{
type: String,
value:''
},
},
data: {
tabbarIndex: 0//默认显⽰第⼀个tab元素
},js获取json的key和value
methods: {
/
/组件的点击事件
tabChange(e) {
//获取到底部栏元素的下标
let index = e.currentTarget.dataset.index;
this.setData({
tabbarIndex:index,
})
//triggerEvent获取组件的事件
//onMyEvent 页⾯传过来的点击事件名称
tabbarIndex:index,
})
},
}
})
4. 在页⾯pages/index/index.json中加⼊
{
"navigationBarTitleText": "测试",
"usingComponents": {
"mp-tabbar": "../components/tabBar/index"
}
}
5. 在页⾯pages/index/index.wxml中加⼊
<view wx:if="{{tabbarIndex == 0}}">111111</view>
<view wx:if="{{tabbarIndex == 1}}">222222</view>
<view wx:if="{{tabbarIndex == 2}}">333333</view>
<mp-tabbar list="{{list}}" id='tabComponent' bind:onMyEvent="switchTab"></mp-tabbar>
6. 在页⾯pages/index/index.js中加⼊
//获取组件传递出来的数据
switchTab:function(e){
let index = e.detail.tabbarIndex;
this.setData({
tabbarIndex:index
})
console.log(e.detail.tabbarIndex)
}
7. 运⾏

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。