看下效果圖：

<view class="swiper-tab">
    <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">最新</view>
    <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">熱門</view>
    <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">遊戲</view>
</view>

<swiper current="{{currentTab}}" duration="300"  bindchange="swiperTab" style='height:80%;'>
    <swiper-item ><view>最新</view></swiper-item>
    <swiper-item><view>熱門</view></swiper-item>
    <swiper-item><view>遊戲</view></swiper-item>
</swiper>
 

page{
    height: 100%;
}
.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;
}
.active{
    color:#F65959;
    border-bottom: 4rpx solid #F65959;
}
swiper{
  text-align: center;
}
 

var app = getApp()
Page({
    data: {
        currentTab: 0
    },
    onLoad: function (options) {
        // 頁面初始化 options為頁面跳轉所帶來的引數

    },
    //滑動切換
    swiperTab: function (e) {
        console.log(e);
        this.setData({
            currentTab: e.detail.current
        });
    },
    //點選切換
    clickTab: function (e) {
        var _this = this;
        if (_this.data.currentTab === e.target.dataset.current) {
            return false;
        } else {
            _this.setData({
                currentTab: e.target.dataset.current
            })
        }
    }
})
 

想要獲得更多資料的  請微信搜尋公眾號 【熱血科技】，關注一下即可。