效果：

直接碼吧，做個筆記。

tab.wxml：

<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">
    <swiper-item>
        <view>全部</view>
    </swiper-item>
    <swiper-item
 
>
        <view>中獎</view>
    </swiper-item>
    <swiper-item>
        <view>未中獎</view>
    </swiper-item>
</swiper>

tab.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;
}

.active {
    color: #f65959;
    border-bottom: 4rpx solid #f65959;
}

swiper {
    text-align: center;
    background-color: #fff
}

tab.js：

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

    //滑動切換
    swiperTab: function (e) {

        this.setData({
            currentTab: e.detail.current
        }); 
    },

    //點選切換
    clickTab: function (e) {
        if (this.data.currentTab === e.target.dataset.current) {
            return false;
        } else {
            this.setData({
                currentTab: e.target.dataset.current
            })
        }
    }
})