利用scroll-view配合swiper进行滑动切页

效果图：

废话不多说上代码(MyTabs.vue)：

<template>
    <view class="tab-view">
        <!-- 使用scroll-view实现tabs滑动切换 -->
        <scroll-view id="tabs-menu" class="tabs-menu" scroll-x="true" :scroll-left="scrollLeft" scroll-anchoring
            scroll-with-animation @touchmove.stop>
            <view class="tab-item" :class="{ active: tabIndex === index }"
                v-for="(item, index) in tabNameList" :key="item.id" @click="switchTab(index)">
                <view class="tab-item-text">{{ item.name }}</view>
            </view>
        </scroll-view>
        <!-- 内容 -->
        <swiper class="swiper-box" :current="tabIndex" @change="swiperChange">
            <swiper-item class="swiper-item" v-for="item in tabNameList" :key="item.id">
                <scroll-view class="swiper-item-scroll" scroll-y="true">
                    <view class="content">这里是{{ item.name }}页面</view>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tabIndex: 0,
            scrollLeft: 0,
            tabNameList: [{
                id: 1,
                name: '推荐',
            },
            {
                id: 2,
                name: '热门',
            },
            {
                id: 3,
                name: '同城',
            },
            {
                id: 4,
                name: '榜单',
            },
            {
                id: 5,
                name: '时尚',
            },
            {
                id: 6,
                name: '明星',
            },
            {
                id: 7,
                name: '视频',
            },
            {
                id: 8,
                name: '局势',
            },
            {
                id: 9,
                name: '电视剧',
            },
            {
                id: 10,
                name: '智能生活',
            },
            {
                id: 11,
                name: '家具',
            },
            {
                id: 12,
                name: '车品',
            },
            {
                id: 13,
                name: '户外运动',
            },
            ],
        }
    },
    created() {
    },
    methods: {
        // 通过改变tabIndex实现联动
        swiperChange(e) {
            const index = e.detail.current
            this.switchTab(index)
        },
        switchTab(index) {
            this.tabIndex = index
        },
    },
    watch: {
        // 相对粗暴的将每个标题移入视野中央的方法，实际上应该是更为精巧的计算
        tabIndex(val) {
            if (val > 2) {
                this.scrollLeft = 40 * (val - 2)
            } else {
                this.scrollLeft = 0
            }
        }
    }
}
</script>

<style scoped lang="scss">
.tab-view {
    width: 100%;
    height: 100%;
}

.tabs-menu {
    white-space: nowrap;
    width: 100%;
    height: 38px;
    line-height: 38px;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    .tab-item {
        display: inline-block;
        white-space: nowrap;
        position: relative;

        &.active .tab-item-text {
            color: rgba(0, 0, 0, 0.9);
            font-weight: 600;
        }

        .tab-item-text {
            font-size: 14px;
            color: rgba(60, 60, 67, 0.6);
        }
    }

    .tab-item+.tab-item {
        margin-left: 20px;
    }

    .tab-item:first-child {
        padding-left: 20px;
    }

    .tab-item:last-child {
        padding-right: 20px;
    }
}

.content-view {
    width: 100%;
}

.swiper-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .content {
        padding: 20px;
        margin-top: 30px;
    }
}
</style>

本来我已经轻车熟路做过一遍这个功能了，谁知道在分享的时候scroll-view出现了滚动条并且一直去不掉，看过原来的代码才知道，要在App.vue里增加这一行代码：

::-webkit-scrollbar{ display:none;}

无了个语撒！