?话不多说直接上代码！！！
在wxml文件中：
????<view?class="swiper-tab">
????????<view?class="swiper-tab-list?{{currentTab==0???'on'?:?''}}"?data-current="0"?bindtap="swichNav">运输中</view>
????????<view?class="swiper-tab-list?{{currentTab==1???'on'?:?''}}"?data-current="1"?bindtap="swichNav">已完成</view>
????</view>
在wxss文件中设置对应class：
.swiper-tab{
??width:?100%;
??border-bottom:?2rpx?solid?#f2f2f2;
??text-align:?center;
??line-height:?80rpx;
??background-color:?#FFFFFF;
}
.swiper-tab-list{??font-size:?30rpx;
????display:?inline-block;
????width:?50%;
????color:?#545454;
}
.on{?
??color:?#5DB88A;
}
.on::after?{
??content:?'';
??width:?30px;
??height:?5rpx;
??display:?block;
??margin:?0?auto;
??border-bottom:?5rpx?solid?#5DB88A;
}
在js文件中编写点击事件：
??swichNav:?function(?e?)?{
???
??????var?that?=?this;
???
??????if(?this.data.currentTab?===?e.target.dataset.current?)?{
????????return?false;
??????}?else?{
? ? ? ? console.log("点击了第"+e.target.dataset.current+"个tab");
????????that.setData(?{
??????????currentTab:?e.target.dataset.current,
????????})
??????}
??},