效果图如上

参考文章：zhuanlan.zhihu.com/p/396348258

示例代码如下

复制
<template> 
    <view> 
        <scroll-view class="tab" scroll-x="true" :scroll-left="scroll_left" :scroll-into-view="into_view" show-scrollbar="false"> 
            <view style="margin:0;padding:0;width:3360rpx;"> 
                <text :id="'s'+index" class="tab-item" v-for="(item,index) in list" :class="{'tab-item-active' : index === current}" 
                    :key="index" @click="switchTab(index)">
                    {{item}}
                </text> 
            </view> 
        </scroll-view>
 
        <swiper class="scroll-view-height" @change="swipeIndex" :current="current" :duration="300"> 
            <swiper-item v-for="(item,index) in list" :key="index"> 
                <scroll-view scroll-y="true" class="scroll-view-height list-content"> 
                    <view class="list-item" v-for="(item,index) in 20" :key="'A'+index">A-list {{index}}</view> 
                </scroll-view> 
            </swiper-item> 
        </swiper> 
    </view>
</template>
 
<script> 
    export default {
        data() {
            return {
                list: ['AAAA', 'BBBB', 'CCCC', 'DDDD', 'EEEE', 'FFFF', 'GGGG', 'HHHH', 'IIII', 'JJJJ', 'KKKK', 'LLLL','QQQQQQ','EEEEEEE','RRRRRRRR','TTTTTTT','YYYYYY','TTTEWW','WWWWWW','QQQQQQ','RRRRRR'],
                // swiper索引 
                current: 0,
                scroll_left: 0,
                into_view: ''
            }
        },
        methods: {
            swipeIndex(index) {
                // 获得swiper切换后的current索引 
                this.switchTab(index.detail.current)
            },
            swtichSwiper(index) {
                // 通过tab组件回调点击切换的index同步swiper的current索引 
                this.current = index
            },
            switchTab(index) {
                this.current = index
                // 向父页面回传tab索引 
                this.$emit('change', index)
 
                this.$data.into_view = 's'+index
 
            }
        },
    }
</script>
 
<style>
    .scroll-view-height {
        /* 页面高度减去包含状态栏、标题、tab组件的高度 */ 
        height: calc(100vh - var(--status-bar-height) - 178rpx);
    }
 
    .list-content {
        background-color: #F4F4F4;
    }
 
    .list-item {
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        margin: 4rpx 0;
        background-color: #FFFFFF;
    }
 
    .tab {
        height: 90rpx;
        line-height: 90rpx;
        width: 100%;
        max-width: 100%; 
    }
 
    .tab-item {
        display: inline-block;
        overflow: hidden;
        margin: 5rpx;
        padding: 0;
        border: 0;
        width: 150rpx;
        text-align: center;
        transition: all .3s ease-in-out;
    }
 
    .tab-item-active {
        background-color: #00AEBE;
        color: #FFFFFF;
    }
 
    /deep/::-webkit-scrollbar {
             display: none;
             width: 0;
             height: 0;
            } 
</style>