wxml:
<
view
class=
"tab-left">
<
view
class=
"{{tabArr.curHdIndex=='1'? 'active' : ''}}"
id=
"1"
data-id=
"1"
bindtap=
"tab">tab-hd01
</
view
>
<
view
class=
"{{tabArr.curHdIndex=='2'? 'active' : ''}}"
id=
"2"
data-id=
"2"
bindtap=
"tab">tab-hd02
</
view
>
<
view
class=
"{{tabArr.curHdIndex=='3'? 'active' : ''}}"
id=
"3"
data-id=
"3"
bindtap=
"tab">tab-hd03
</
view
>
<
view
class=
"{{tabArr.curHdIndex=='4'? 'active' : ''}}"
id=
"4"
data-id=
"4"
bindtap=
"tab">tab-hd04
</
view
>
</
view
>
<
view
class=
"tab-right">
<
view
class=
"right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd01
</
view
>
<
view
class=
"right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd02
</
view
>
<
view
class=
"right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd03
</
view
>
<
view
class=
"right-item {{tabArr.curBdIndex=='4'? 'active' : ''}}">tab-bd04
</
view
>
</
view
>
wxss:
.tab-left
.active{
color:
#ff0000;
}
.tab-left{
display:
flex;
}
.tab-left
view{
width:
25%;
}
.tab-right
.right-item{
display:
none;
height:
300
rpx;
width:
100%;
border:
solid
1px
}
.tab-right
.right-item.active{
display:
block}
js:
data: {
// tab 切换
tabArr: {
curHdIndex:
1,
curBdIndex:
1
},
//tab切换
tab:
function (e) {
var dataId = e.currentTarget.id;
var obj = {};
obj.curHdIndex = dataId;
obj.curBdIndex = dataId;
this.setData({
tabArr: obj
})
},