Vue 中实现高性能虚拟列表：解决大数据量滚动优化难题

<template>
    <div ref="list" class="infinite-list-container" @scroll="scrollEvent($event)">
        <!-- 占位符，用于撑起滚动条 -->
        <div
            class="infinite-list-phantom"
            :style="{ height: listHeight + 'px' }"
        ></div>
        <!-- 实际渲染可见列表项的区域 -->
        <div class="infinite-list" :style="{ transform: getTransform }">
            <!-- 使用 slot 渲染子项，data 属性传递当前项数据 -->
            <slot v-for="data in visibleData" :data="data"/>
        </div>
    </div>
</template>

<style scoped>
.infinite-list-container {
    height: 100%; /* 确保容器有固定高度 */
    overflow: auto; /* 允许滚动 */
    position: relative; /* 为内部绝对定位元素提供参考 */
    -webkit-overflow-scrolling: touch; /* 优化 iOS 上的滚动体验 */
}

.infinite-list-phantom {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1; /* 确保不遮挡内容 */
}

.infinite-list {
    left: 0;
    right: 0;
    top: 0;
    position: absolute; /* 绝对定位，通过 transform 移动 */
    text-align: center; /* 可根据需要调整 */
}
</style>

<script>
export default {
    name: "VirtualList",
    props: {
        // 完整的列表数据数组
        listData: {
            type: Array,
            default: () => [],
            require: true,
        },
        // 每个列表项的固定高度
        itemHeight: {
            type: Number,
            default: 20, // 默认高度20px
            require: true,
        },
    },
    data() {
        return {
            screenHeight: 0, // 可视区域高度
            startOffset: 0,  // 列表内容区相对于容器顶部的偏移量
            start: 0,        // 可视区域第一个列表项的索引
            end: null,       // 可视区域最后一个列表项的索引
        };
    },
    computed: {
        // 整个列表的理论总高度
        listHeight() {
            return this.listData.length * this.itemHeight;
        },
        // 可视区域内可容纳的列表项数量
        visibleCount() {
            return Math.ceil(this.screenHeight / this.itemHeight);
        },
        // 计算内容区的 transform 样式，实现平移
        getTransform() {
            return `translate3d(0,${this.startOffset}px,0)`;
        },
        // 实际渲染到 DOM 的数据子集
        visibleData() {
            // 额外渲染少量元素以优化滚动体验，避免白屏
            const extraItems = 2; // 例如，在可见区域前后各多渲染2个
            const startIndex = Math.max(0, this.start - extraItems);
            const endIndex = Math.min(this.listData.length, this.end + extraItems);
            return this.listData.slice(startIndex, endIndex);
        },
    },
    mounted() {
        // 组件挂载后，获取容器的实际可视高度
        this.screenHeight = this.$el.clientHeight;
        // 初始化可见区域的起始和结束索引
        this.start = 0;
        this.end = this.start + this.visibleCount;
    },
    methods: {
        scrollEvent() {
            // 获取当前滚动条的 scrollTop 值
            let scrollTop = this.$refs.list.scrollTop;
            // 根据 scrollTop 和 itemHeight 计算当前可视区域的起始索引
            this.start = Math.floor(scrollTop / this.itemHeight);
            // 计算可视区域的结束索引
            this.end = this.start + this.visibleCount;
            // 计算内容区的垂直偏移量，保证滚动时内容区位置正确
            this.startOffset = scrollTop - (scrollTop % this.itemHeight);
        },
    },
};
</script>

<template>
    <div class="app-container">
        <div class="column-wrapper">
            <!-- 左侧列：供应商列表 -->
            <div class="scroll-column">
                <h2>供应商列表 ({{ suppliers.length }} 条)</h2>
                <VirtualList :listData="suppliers" :itemHeight="30">
                    <template v-slot="{ data }">
                        <div class="list-item">
                            {{ data.id }} - {{ data.name }}
                        </div>
                    </template>
                </VirtualList>
            </div>

            <!-- 右侧列：客户列表 -->
            <div class="scroll-column">
                <h2>客户列表 ({{ clients.length }} 条)</h2>
                <VirtualList :listData="clients" :itemHeight="30">
                    <template v-slot="{ data }">
                        <div class="list-item">
                            {{ data.id }} - {{ data.name }} - {{ data.address }}
                        </div>
                    </template>
                </VirtualList>
            </div>
        </div>
    </div>
</template>

<script>
import VirtualList from './VirtualList.vue'; // 假设 VirtualList.vue 在同级目录

export default {
    components: {
        VirtualList,
    },
    data() {
        return {
            suppliers: [], // 模拟供应商数据，例如 2000 条
            clients: [],   // 模拟客户数据，例如 58000 条
        };
    },
    mounted() {
        // 模拟数据加载
        this.loadMockData();
    },
    methods: {
        loadMockData() {
            // 生成模拟供应商数据
            for (let i = 0; i < 2000; i++) {
                this.suppliers.push({ id: i, name: `Supplier ${i}`, category: `Category ${i % 5}` });
            }
            // 生成模拟客户数据
            for (let i = 0; i < 58000; i++) {
                this.clients.push({ id: i, name: `Client ${i}`, address: `Address ${i}`, city: `City ${i % 10}` });
            }
        },
    },
};
</script>

<style scoped>
.app-container {
    display: flex;
    height: 100vh; /* 整个应用容器高度 */
    overflow: hidden; /* 避免整个应用出现滚动条 */
}

.column-wrapper {
    display: flex;
    flex: 1;
    gap: 20px; /* 两列之间的间距 */
    padding: 20px;
}

.scroll-column {
    flex: 1; /* 每列占据可用空间的均等部分 */
    border: 1px solid #ccc;
    padding: 10px;
    height: calc(100vh - 40px); /* 减去 padding 和可能的其他元素高度 */
    display: flex;
    flex-direction: column;
}

.scroll-column h2 {
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
}

/* 确保 VirtualList 容器能够撑满父级高度 */
.scroll-column > .infinite-list-container {
    flex: 1; /* 让 VirtualList 占据剩余空间 */
}

.list-item {
    padding: 8px 15px;
    border-bottom: 1px dashed #eee;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 30px; /* 必须与 itemHeight prop 保持一致 */
    line-height: 30px; /* 垂直居中 */
    box-sizing: border-box;
}

.list-item:hover {
    background-color: #f0f0f0;
}
</style>