首先是wxml文件
<view class="tabCon">
<view class="tab1" bindtap="tab1Click">tab1</view>
<view class="tab2" bindtap="tab2Click">tab2</view>
<view class="tab3" bindtap="tab3Click">tab3</view>
<view class="border"></view>
<view class="{{tab==='1'?'active1':tab==='2'?'active2':tab==='3'?'active3':'active1'}}"></view>
</view>
<view>选项卡内容</view>
下面是css文件
.tabCon {
margin: 0 10rpx;
height: 40px;
position: relative;
}
.tabCon .tab1{
display: inline-block;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
height: 30px;
width: 100px;
line-height: 30px;
text-align: center;
}
.tabCon .tab2 {
display: inline-block;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
height: 30px;
line-height: 30px;
width: 100px;
text-align: center;
}
.tabCon .tab3 {
display: inline-block;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
height: 30px;
line-height: 30px;
width: 100px;
text-align: center;
}
.tabCon .border {
width: 100%;
height: 1px;
position: absolute;
top: 30px;
left: 0;
background-color: #ccc;
}
.tabCon .active1 {
width: 102px;
height: 2px;
background-color: #fff;
position: absolute;
top: 30px;
left: 0;
}
.tabCon .active2 {
width: 100px;
height: 2px;
background-color: #fff;
position: absolute;
top: 30px;
left: 102px;
}
.tabCon .active3 {
width: 100px;
height: 2px;
background-color: #fff;
position: absolute;
top: 30px;
left: 202px;
}
下面是js的核心部分:
tab1Click() {
this.setData({tab:'1'});
},
tab2Click() {
this.setData({tab:'2'});
},
tab3Click() {
this.setData({tab:'3'});
}