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 協議》，轉載必須註明作者和本文連結