uni-app 实现滑动列表(slider)页面效果 完整代码示例

效果图如上
参考文章：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>

本作品采用《CC 协议》，转载必须注明作者和本文链接