uniapp横向选项卡（水平导航栏）滚动效果

可直接复制

<template>
    <view>
        <!-- 顶部导航栏 -->
        <view class="horizonal-tab">
            <scroll-view scroll-x="true" scroll-with-animation :throttle="false" class="scroll-tab" >
                <block v-for="(item,index) in tabBars" :key="index">
                    <view class="scroll-tab-item" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
                        {{item.name}}
                        <view class="scroll-tab-line"></view>
                    </view>
                </block>
            </scroll-view>
        </view>

        <!-- 内容区 -->
        <view class="content">
            <!-- 滑块视图 -->
            <swiper :current="tabIndex" @change="tabChange">
                <!-- current:当前所在滑块的index -->
                <swiper-item v-for="(content,index) in contentList" :key="index" class="con">
                    <view class="info">
                        <view class="">
                            {{content}}
                        </view>
                    </view>
                </swiper-item>
            </swiper>
        </view>


    </view>
</template>

<script>
    export default {
        data() {
            return {
                scrollAreaLeft:0,
                scrollAreaWidth:0,
                tabItemList:[],
                scrollToLeft: 0,
                tabIndex: 0,
                /* 选中标签栏的序列,默认显示第一个 */
                contentList: [
                    "分类标题",
                    "分类标题",
                    "分类标题",
                    "分类标题",
                    '分类标题',
                    '分类标题',
                    '分类标题'
                ],
                tabBars: [{
                        name: '分类标题',
                        id: '0'
                    },
                    {
                        name: '分类标题',
                        id: '1'
                    },
                    {
                        name: '分类标题',
                        id: '2'
                    },
                    {
                        name: '分类标题',
                        id: '3'
                    },
                    {
                        name: '分类标题',
                        id: '4'
                    },
                    {
                        name: '分类标题',
                        id: '5'
                    },
                    {
                        name: '分类标题',
                        id: '6'
                    }
                ]
            }
        },
        methods: {
            //切换选项卡
            toggleTab(index) {
                this.tabIndex = index;
                this.scrollDom(index);
            },
            //滑动切换swiper
            tabChange(e) {
                // console.log(e);
                this.tabIndex = e.detail.current;
            },
        }
    }
</script>
<style>
    page{
        background-color: #f7f7f7;
    }
</style>
<style>
    .horizonal-tab {}

    .horizonal-tab .active {
        /* color: red; */
        height: 100%;
    }

    .scroll-tab {
        background-color: #fff;
        white-space: nowrap;
        /* 必要，导航栏才能横向*/
        text-align: center;
    }

    .scroll-tab-item {
        height: 45px;
        line-height: 45px;
        display: inline-block;
        /* 必要，导航栏才能横向*/
        margin: 0rpx 30rpx 0 30rpx;
    }

    .active .scroll-tab-line {
        border-bottom: 5rpx solid #30c4cc;
        border-top: 5rpx solid #30c4cc;
        border-radius: 20rpx;
        width: 60%;
        margin: 0 auto;
    }
    .con {
        background-color: #fff;
        height: 300px;
        margin-top: 20px;
        border-radius: 20px;
    }
    .info {
        padding: 20px;
    }
</style>