Vue高性能无限滚动与虚拟列表实现指南

<template>
    <div ref="list" class="infinite-list-container" @scroll="scrollEvent($event)">
        <!-- 占位元素：模拟整个列表的高度，提供正确的滚动条 -->
        <div
            class="infinite-list-phantom"
            :style="{ height: listHeight + 'px' }"
        ></div>
        <!-- 实际渲染内容的容器：通过transform实现偏移 -->
        <div class="infinite-list" :style="{ transform: getTransform }">
            <!-- 使用slot渲染可见数据，允许父组件自定义每个列表项的显示 -->
            <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,
            require: true,
        },
    },
    computed: {
        // 列表的总高度
        listHeight() {
            return this.listData.length * this.itemHeight;
        },
        // 可见区域内可容纳的列表项数量
        visibleCount() {
            return Math.ceil(this.screenHeight / this.itemHeight);
        },
        // 实际渲染内容的垂直偏移量
        getTransform() {
            return `translate3d(0,${this.startOffset}px,0)`;
        },
        // 实际渲染的DOM数据（可视区域内的数据切片）
        visibleData() {
            // 从原始数据中切片，确保不超出数据边界
            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;
    },
    data() {
        return {
            // 可视区域高度
            screenHeight: 0,
            // 列表内容实际渲染的偏移量
            startOffset: 0,
            // 可视区域内第一个列表项的索引
            start: 0,
            // 可视区域内最后一个列表项的索引
            end: null,
        };
    },
    methods: {
        scrollEvent() {
            // 获取当前滚动条位置
            let scrollTop = this.$refs.list.scrollTop;
            // 根据滚动位置计算新的起始索引
            this.start = Math.floor(scrollTop / this.itemHeight);
            // 计算新的结束索引
            this.end = this.start + this.visibleCount;
            // 计算实际渲染内容的偏移量
            // 确保偏移量是itemHeight的整数倍，避免视觉上的跳动
            this.startOffset = scrollTop - (scrollTop % this.itemHeight);
        },
    },
};
</script>

<template>
    <div class="app-container">
        <!-- 第一个列表列 -->
        <div class="column">
            <h3>供应商列表 (2000项)</h3>
            <VirtualList :listData="suppliers" :itemHeight="30">
                <template v-slot="{ data }">
                    <div class="list-item">
                        {{ data.id }} - {{ data.name }}
                    </div>
                </template>
            </VirtualList>
        </div>

        <!-- 第二个列表列 -->
        <div class="column">
            <h3>客户列表 (58000项)</h3>
            <VirtualList :listData="clients" :itemHeight="40">
                <template v-slot="{ data }">
                    <div class="list-item client-item">
                        {{ data.code }} | {{ data.description }}
                    </div>
                </template>
            </VirtualList>
        </div>
    </div>
</template>

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

export default {
    components: {
        VirtualList,
    },
    data() {
        return {
            suppliers: [], // 假设从API加载
            clients: [],   // 假设从API加载
        };
    },
    mounted() {
        // 模拟数据加载
        this.loadSuppliers();
        this.loadClients();
    },
    methods: {
        loadSuppliers() {
            // 真实应用中这里会是API调用
            for (let i = 0; i < 2000; i++) {
                this.suppliers.push({ id: i + 1, name: `供应商 ${i + 1}` });
            }
        },
        loadClients() {
            // 真实应用中这里会是API调用
            for (let i = 0; i < 58000; i++) {
                this.clients.push({ code: `C${i + 1}`, description: `客户描述 ${i + 1}` });
            }
        },
    },
};
</script>

<style scoped>
.app-container {
    display: flex;
    height: 74vh; /* 根据原始问题，容器高度固定 */
    overflow: hidden; /* 确保整个应用容器不会滚动 */
}

.column {
    flex: 1;
    margin: 10px;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
}

.column h3 {
    padding: 10px;
    margin: 0;
    background-color: #f0f0f0;
    border-bottom: 1px solid #eee;
}

/* VirtualList组件会占据column剩余空间 */
.column > .infinite-list-container {
    flex-grow: 1; /* 让VirtualList占据所有可用垂直空间 */
}

.list-item {
    padding: 5px 10px;
    border-bottom: 1px solid #f5f5f5;
    background-color: #fff;
    line-height: 20px; /* 确保与itemHeight匹配 */
}

.client-item {
    background-color: #eaf7ff;
}
</style>