1.写死（固定写死当值发生改变时需要手动修改，不利于维护）
//wxml
//三元运算符判断如果currentTab==当前被点击的 data-current时，添加avtive样式否则为不添加样式
<
view
class
=
"swiper-tab">
<
view
class
=
"swiper-tab-list {{Tab==0 ? 'active' : ''}}"
data-current
=
"0"
bindtap
=
"swichNav">
0000000000
</
view
>
<
view
class
=
"swiper-tab-list {{Tab==1 ? 'active' : ''}}"
data-current
=
"1"
bindtap
=
"swichNav">
1111111111
</
view
>
<
view
class
=
"swiper-tab-list {{Tab==2 ? 'active' : ''}}"
data-current
=
"2"
bindtap
=
"swichNav">
2222222222
</
view
>
<
view
class
=
"swiper-tab-list {{Tab==3 ? 'active' : ''}}"
data-current
=
"3"
bindtap
=
"swichNav">
3333333333
</
view
>
<
view
class
=
"swiper-tab-list {{Tab==4 ? 'active' : ''}}"
data-current
=
"4"
bindtap
=
"swichNav">
4444444444
</
view
>
</
view
>
<
view
class
=
"right">
<
view
class
=
"right-item {{Index=='0' ? 'active' : ''}} ">
tab-bd00
</
view
>
<
view
class
=
"right-item {{Index=='1' ? 'active' : ''}} ">
tab-bd01
</
view
>
<
view
class
=
"right-item {{Index=='2' ? 'active' : ''}} ">
tab-bd02
</
view
>
<
view
class
=
"right-item {{Index=='3' ? 'active' : ''}} ">
tab-bd03
</
view
>
<
view
class
=
"right-item {{Index=='4'? ' active ' : ' '}}">
tab-bd04
</
view
>
</
view
>
//wxss
.swiper-tab .active{
color:red;
}
.right .active{
display: block;
}
.right-item{
display: none;
}
//js
Page({
data: {
Tab:
0
,
//默认第一项显示为当前
Index:
0
},
/**
* 点击tab切换
*/
swichNav:
function
(e) {
var
that =
this
;
//让被点击的项的currentTab与data-current对应
if
(
this
.data.Tab === e.target.dataset.current) {
return
false
;
}
else
{
that.setData({
Tab: e.target.dataset.current,
Index: e.target.dataset.current,
})
}
},
})
2.循环法（适用于通过后台数据进行操作的选项卡）
<!--index.wxml-->
<view class='Choose_left left'>
<view class="list_item1 {{curIndex==index?'active':''}}" wx:for="{{simulation1}}" wx:for-index='index' data-index='{{index}}' bindtap='change_item2'>
{{item}}
</view>
</view>
<view class='Choose_right right' >
<view class='list_item2' wx:for="{{simulation2_1[curIndex].index1}}" wx:for-index='index' data-index='{{index}}' >
{{item}}
</view>
</view>
/**index.wxss**/
.left{
float: left;
}
.right{
float: right;
}
.Choose_left{
width: 20%;
height: auto;
}
.Choose_right{
width: 77%;
height: auto;
}
.list_item1,.list_item2{
height: 80rpx;
line-height: 80rpx;
text-align: center;
border: 1px solid #ccc;
}
.list_item1,.list_item2{
border-top: none;
}
.active{
background:#ccc;
color: #fff;
}
//index.js
Page({
data: {
simulation1: ['北京', '上海', '广东', '浙江', '北京', '上海', '广东', '浙江'],
simulation2_1: [
{ index1: ['北京', '北京', '北京', '北京', '北京', '北京', '北京', '北京']},
{ index1: ['上海', '上海', '上海', '上海', '上海', '上海', '上海', '上海'] },
{ index1: ['广东', '广东', '广东', '广东', '广东', '广东', '广东', '广东'] },
{ index1: ['浙江', '浙江', '浙江', '浙江', '浙江', '浙江', '浙江', '浙江'] },
{ index1: ['北京', '北京', '北京', '北京', '北京', '北京', '北京', '北京'] },
{ index1: ['上海', '上海', '上海', '上海', '上海', '上海', '上海', '上海'] },
{ index1: ['广东', '广东', '广东', '广东', '广东', '广东', '广东', '广东'] },
{ index1: ['浙江', '浙江', '浙江', '浙江', '浙江', '浙江', '浙江', '浙江'] }
],
curIndex: 0,
},
change_item2: function (e) {
var that = this;
var index = e.currentTarget.dataset.index;
if (that.data.curIndex == index) {
return;
}
else {
that.setData({
curIndex: index,
})
}
},
onLoad: function (options) {
}
})