wxml

<! --pages/mine/order/order.wxml--> <view class='order'> <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0? </view> <view class="swiper-tab-item {{currentTab==1? </view> <view class="swiper-tab-item {{currentTab==2? </view> <view class="swiper-tab-item {{currentTab==3? </view> <view class="swiper-tab-item {{currentTab==4? </view> </view> <swiper current="{{currentTab}}" duration="300" Bindchange ="swiperTab"> <swiper-item> <view> Payment for </view> </swiper-item> <view> <swiper-item> <swiper-item> <swiper-item> <swiper-item> <swiper-item> <swiper-item> <swiper-item> < view > refund/after-sale < / view > < / swiper - item > < / swiper > < / view >Copy the code

wxss

.swiper-tab {
    width: 100%;
    border-bottom: 2rpx solid #ccc;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}
 
.swiper-tab-item {
    width: 30%;
    color: #434343;
    font-size: 28rpx;
}
 
.active {
    color: #f65959;
    border-bottom: 4rpx solid #f65959;
}
 
swiper {
    text-align: center;
    background-color: #fff
}
Copy the code

js

Page({/** ** the initial data of the Page */ data: {currentTab: 0}, /** * the lifecycle function -- listen to the Page load */ onLoad: SwiperTab: function (e) {this.setData({currentTab: e.taill.current}); }, // clickTab: function (e) {if (this.data.currentTab === e.target.dataset. Current) {return false; } else { this.setData({ currentTab: e.target.dataset.current }) } } })Copy the code