wxml:
<
view
class
=
"tab"
>
<
view
class
=
"tab-left"
bindtap
=
"tabFun"
>
<
view
class
=
"{{tabArr.curHdIndex=='0'? 'active' : ''}}"
id
=
"tab-hd01"
data-id
=
"0"
>tab-hd01</
view
>
<
view
class
=
"{{tabArr.curHdIndex=='1'? 'active' : ''}}"
id
=
"tab-hd02"
data-id
=
"1"
>tab-hd01</
view
>
<
view
class
=
"{{tabArr.curHdIndex=='2'? 'active' : ''}}"
id
=
"tab-hd03"
data-id
=
"2"
>tab-hd01</
view
>
<
view
class
=
"{{tabArr.curHdIndex=='3'? 'active' : ''}}"
id
=
"tab-hd04"
data-id
=
"3"
>tab-hd01</
view
>
</
view
>
<
view
class
=
"tab-right"
>
<
view
class
=
"right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}"
>tab-bd01</
view
>
<
view
class
=
"right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}"
>tab-bd02</
view
>
<
view
class
=
"right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}"
>tab-bd03</
view
>
<
view
class
=
"right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}"
>tab-bd04</
view
>
</
view
>
</
view
>
js:
Page( {
data: {
tabArr: {
curHdIndex: 0,
curBdIndex: 0
},
},
tabFun:
function
(e){
//获取触发事件组件的dataset属性
var
_datasetId=e.target.dataset.id;
console.log(
"----"
+_datasetId+
"----"
);
var
_obj={};
_obj.curHdIndex=_datasetId;
_obj.curBdIndex=_datasetId;
this
.setData({
tabArr: _obj
});
},
onLoad:
function
( options ) {
alert(
"------"
);
}
});
wxss:
.tab{
display: flex;
flex-direction: row;
}
.tab-left{
200rpx;
line-height: 160%;
border-right: solid 1px gray;
}
.tab-left view{
border-bottom: solid 1px red;
}
.tab-left .active{
color:
#f00;
}
.tab-right{
line-height: 160%;
}
.tab-right .right-item{
padding-left: 15rpx;
display: none;
}
.tab-right .right-item.active{
display: block;
}
原文:http://www.jb51.net/article/96095.htm