微信小程序可以横向滚动的tab效果

样式

.tab-box {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    overflow: hidden;
    background-color: green;
    white-space: nowrap;
}
.tab-item {
    width: 20%;
    text-align: center;
    display: inline-block;
    color: white;
}
.tab-item.active {
    color: yellow;
}
.tab-content {
    margin-top: 80rpx;
    height: 100vh;
}

模板

<view>
    <scroll-view scroll-x="true" class="tab-box" scroll-left="{{ left }}">
        <block wx:for="{{ list }}" wx:for-item="item" wx:for-index="index" wx:key="*this">
            <view class="tab-item {{ currentTab==index?'active':'' }}" data-current="{{ index }}" bindtap="swichNav">{{ item.name }}</view>
        </block>
    </scroll-view>
    <swiper class="tab-content" current="{{ currentTab }}" duration="300" bindchange="switchTab">
        <swiper-item wx:for="{{ list }}" wx:for-item="item" wx:for-index="index" wx:key="*this">
            <scroll-view scroll-y="true" style="height:100%;">
                <view>第{{ index + 1 }}个分类的名称为{{ item.name }}</view>
                <view wx:for="{{ 50 }}" wx:for-item="item2" wx:for-index="index2" wx:key="*this">第{{ index2 + 1 }}条记录的名称为{{ item.name }}-{{ item2 + 1 }}</view>
            </scroll-view>
        </swiper-item>
    </swiper>
</view>

脚本

Page({
    data: {
        count: 5,
        windowWidth: 0,
        currentTab: 0,
        left: 0,
        list: [
            {"name": "健康"},
            {"name": "情感"},
            {"name": "职场"},
            {"name": "育儿"},
            {"name": "纠纷"},
            {"name": "青葱"},
            {"name": "其他"},
            {"name": "全部"},
            {"name": "女性"},
            {"name": "男性"},
            {"name": "国际"},
            {"name": "畅谈天下"},
            {"name": "都市生活"},
            {"name": "相声"},
            {"name": "小品"},
            {"name": "演唱会"},
            {"name": "流行音乐"},
            {"name": "KTV"},
            {"name": "PHP"},
            {"name": "Dart"}
        ]
    },
    onLoad: function(){
        var that = this;
        wx.getSystemInfo({
            success: function(res){
                that.setData({windowWidth: res.windowWidth});
            }
        });
    },
    switchTab: function(e){
        this.setData({currentTab: e.detail.current});
        this.setLeft();
    },
    swichNav: function(e){
        var current = e.target.dataset.current;
        if(this.data.currentTab != current){
            this.setData({currentTab: current});
        }
        this.setLeft();
    },
    setLeft: function(){
        var data = this.data;
        var count = data.count;
        var windowWidth = data.windowWidth;
        var currentTab = data.currentTab;
        var per = windowWidth / count;
        var left = (currentTab - 2) * per;
        if(left < 0){
            left = 0;
        }
        this.setData({left: left});
    }
});