1,准备子组件tab
{
"component": true
}
Component({
options: {
multipleSlots: true
},
properties: {
tabList: {
type: Array,
value: []
},
tabId: {
type: String,
value: '0'
},
},
data: {},
methods: {
_tabChange(e){
let tabId = e.currentTarget.dataset.id
this.triggerEvent('onTab', tabId)
},
}
})
<view class="tabBox">
<view wx:for="{{tabList}}" wx:key='index' class="tab">
<view class='{{item.id==tabId?"active":""}}'
bindtap="_tabChange"
data-id='{{item.id}}'>
{{item.title}}
</view>
</view>
</view>
.tabBox{
display: flex;
}
.tab{
width: 200rpx;
margin-top: 20rpx;
text-align:center;
}
.tabBox .active{
color: red;
font-size: 32rpx;
font-weight: 700;
border-bottom: 4rpx solid red;
}
2,使用
"usingComponents": {
"tab":"/components/tab/tab"
},
<tab tabList='{{tabList}}' tabId='{{tabId}}' bind:onTab='onTab'></tab>
Page({
data: {
tabList:[
{title:'美食',id:'0'},
{title:'风景',id:'1'},
{title:'生活',id:'2'}
],
tabId:'0',
},
onTab(e){
let tabId = e.detail
this.setData({
tabId:tabId
})
console.log(tabId)
},
})