微信小程序 tab选项卡，可点击，可滑动

看下效果图：

<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
            })
        }
    }
})

想要获得更多资料的  请微信搜索公众号 【热血科技】，关注一下即可。