微信小程序可以横向滚动的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;
}

模板

    
        
            {{ item.name }}
        
    
    
        
            
                第{{ index + 1 }}个分类的名称为{{ item.name }}
                第{{ index2 + 1 }}条记录的名称为{{ item.name }}-{{ item2 + 1 }}
            
        
    

脚本

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