1. 目录结构
2. tabs
<view class="item-wrap">
<view class="item {
{ item.isActive?'active':'' }}"
wx:for="{
{ tabBar }}" wx:key='id'
bindtap="handleIndex" data-index="{
{ item.id }}"
>
{
{ item.value }}
</view>
</view>
<view class="content">
<slot></slot>
</view>
.item-wrap{
display: flex;
}
.item-wrap .item{
flex:1;
text-align: center;
padding: 20rpx 0;
}
.item-wrap .item.active{
border-bottom: 3px solid red;
}
Component({
properties: {
tabBar:Array
},
methods:{
handleIndex(e){
const {
index } = e.currentTarget.dataset
this.triggerEvent('transformIndex', index)
}
},
})
3. 父组件
<Tabs tabBar='{
{ tabBar }}' bind:transformIndex='handleIndex'>
<view wx:if="{
{ tabBar[0].isActive }}">
综合数据
</view>
<view wx:elif="{
{ tabBar[1].isActive }}">
销量数据
</view>
<view wx:elif="{
{ tabBar[2].isActive }}">
价格数据
</view>
</Tabs>
Page({
data: {
tabBar: [
{
id:0,
value: '综合',
isActive: true
},
{
id:1,
value: '销量',
isActive: false
},
{
id:2,
value: '价格',
isActive: false
}
]
},
handleIndex(e){
const index = e.detail;
const {
tabBar} = this.data;
tabBar.forEach(v=>v.id === index ? v.isActive = true: v.isActive = false)
this.setData({
tabBar
})
}
})
{
"usingComponents": {
"Tabs":"/components/tabs/tabs"
}
}
3. 效果