Vue中大型数据集高性能虚拟滚动列表的实现

<template>
    <div ref="list" class="infinite-list-container" @scroll="scrollEvent">
        <!-- 占位元素，撑开滚动容器的高度，提供正确的滚动条范围 -->
        <div
            class="infinite-list-phantom"
            :style="{ height: listHeight + 'px' }"
        ></div>
        <!-- 实际渲染的可见列表项容器 -->
        <div class="infinite-list" :style="{ transform: getTransform }">
            <!-- 使用插槽渲染列表项，允许父组件自定义每个列表项的显示 -->
            <slot v-for="data in visibleData" :data="data" :key="data.id || JSON.stringify(data)"/>
        </div>
    </div>
</template>

<script>
export default {
    name: "VirtualList",
    props: {
        // 待遍历的完整数据集
        listData: {
            type: Array,
            default: () => [],
            required: true,
        },
        // 每个列表项的固定高度（为简化计算，假设高度固定）
        itemHeight: {
            type: Number,
            default: 20, // 默认每个item高度20px
            required: 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);
        },
        // 实际渲染列表容器的CSS transform样式，实现滚动效果
        getTransform() {
            return `translate3d(0,${this.startOffset}px,0)`;
        },
        // 当前可视区域内需要渲染的数据子集
        visibleData() {
            // 确保end索引不超过listData的实际长度
            return this.listData.slice(
                this.start,
                Math.min(this.end, this.listData.length)
            );
        },
    },
    mounted() {
        // 组件挂载后，获取滚动容器的实际高度
        this.screenHeight = this.$el.clientHeight;
        // 初始化可视区域的起始和结束索引
        this.start = 0;
        this.end = this.start + this.visibleCount;
    },
    methods: {
        /**
         * 滚动事件处理函数
         * 根据滚动位置计算需要渲染的列表项范围和偏移量
         */
        scrollEvent() {
            // 获取当前滚动条的垂直位置
            let scrollTop = this.$refs.list.scrollTop;
            // 计算可视区域内第一个列表项的索引
            this.start = Math.floor(scrollTop / this.itemHeight);
            // 计算可视区域内最后一个列表项的索引
            this.end = this.start + this.visibleCount;
            // 计算实际渲染列表容器的偏移量，实现平滑滚动
            this.startOffset = scrollTop - (scrollTop % this.itemHeight);
        },
    },
};
</script>

<style scoped>
.infinite-list-container {
    height: 100%; /* 确保容器有固定高度，并允许内部滚动 */
    overflow: auto;
    position: relative; /* 为内部绝对定位元素提供定位上下文 */
    -webkit-overflow-scrolling: touch; /* 提升移动端滚动体验 */
}

.infinite-list-phantom {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1; /* 确保它在实际列表项的下方 */
}

.infinite-list {
    left: 0;
    right: 0;
    top: 0;
    position: absolute;
    text-align: center; /* 示例，可根据实际需求调整 */
}
</style>

<template>
    <div class="app-container">
        <!-- 第一个虚拟滚动列 -->
        <div class="column">
            <h3>供应商列表 ({{ suppliers.length }} 条)</h3>
            <VirtualList :listData="suppliers" :itemHeight="30">
                <!-- 使用 v-slot 渲染每个供应商项 -->
                <template v-slot:default="{ data }">
                    <div class="list-item">
                        {{ data.id }} - {{ data.name }}
                    </div>
                </template>
            </VirtualList>
        </div>

        <!-- 第二个虚拟滚动列 -->
        <div class="column">
            <h3>客户列表 ({{ clients.length }} 条)</h3>
            <VirtualList :listData="clients" :itemHeight="30">
                <!-- 使用 v-slot 渲染每个客户项 -->
                <template v-slot:default="{ data }">
                    <div class="list-item">
                        {{ data.id }} - {{ data.company }}
                    </div>
                </template>
            </VirtualList>
        </div>
    </div>
</template>

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

export default {
    components: {
        VirtualList,
    },
    data() {
        return {
            suppliers: [], // 假设这是从数据库加载的2000个对象
            clients: [],   // 假设这是从数据库加载的58000个对象
        };
    },
    mounted() {
        // 模拟数据加载
        this.loadInitialData();
    },
    methods: {
        loadInitialData() {
            // 生成模拟数据
            for (let i = 0; i < 2000; i++) {
                this.suppliers.push({ id: i + 1, name: `Supplier ${i + 1}` });
            }
            for (let i = 0; i < 58000; i++) {
                this.clients.push({ id: i + 1, company: `Client Company ${i + 1}` });
            }
        },
        // 如果需要实现“加载更多”功能，可以在父组件中监听VirtualList的滚动事件
        // 或者在VirtualList内部添加一个“滚动到底部”的事件触发，
        // 当滚动接近底部时，父组件可以请求更多数据并追加到 listData 中。
        // 但对于纯粹的虚拟滚动，所有数据通常一次性提供给 listData。
    },
};
</script>

<style>
.app-container {
    display: flex;
    height: 74vh; /* 假设应用容器的高度为74vh */
    gap: 20px;
}

.column {
    flex: 1; /* 两列平分宽度 */
    border: 1px solid #eee;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

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

.list-item {
    height: 30px; /* 必须与 VirtualList 的 itemHeight prop 匹配 */
    line-height: 30px;
    border-bottom: 1px solid #f0f0f0;
    padding-left: 10px;
    box-sizing: border-box;
}

.list-item:nth-child(even) {
    background-color: #f9f9f9;
}
</style>