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 渲染可见数据项，data 属性将当前数据传递给父组件 -->
            <slot v-for="data in visibleData" :data="data"/>
        </div>
    </div>
</template>

<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);
        },
        // 用于定位可视区域的CSS transform样式
        getTransform() {
            return `translate3d(0,${this.startOffset}px,0)`;
        },
        // 实际需要渲染的可见数据子集
        visibleData() {
            // 从完整数据中截取 start 到 end 之间的数据
            return this.listData.slice(
                this.start,
                Math.min(this.end, this.listData.length) // 确保 end 不超过数据总长度
            );
        },
    },
    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;
            // 计算新的垂直偏移量，用于定位 visible-list
            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">
                <template v-slot="{ data }">
                    <div class="list-item">{{ data.name }} - ID: {{ data.id }}</div>
                </template>
            </VirtualList>
        </div>
        <div class="column">
            <h3>客户列表 ({{ clients.length }} 条)</h3>
            <VirtualList :listData="clients" :itemHeight="30">
                <template v-slot="{ data }">
                    <div class="list-item">{{ data.name }} - Email: {{ data.email }}</div>
                </template>
            </VirtualList>
        </div>
    </div>
</template>

<script>
import VirtualList from './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: `S${i}`, name: `Supplier ${i}` });
            }
            // 模拟加载客户数据
            for (let i = 0; i < 58000; i++) {
                this.clients.push({ id: `C${i}`, name: `Client ${i}`, email: `client${i}@example.com` });
            }
        },
        // 可以在这里实现无限加载的逻辑，当列表滚动到底部时触发
        // 例如，在 VirtualList 组件内部可以暴露一个事件，当滚动接近底部时触发
        // 然后父组件监听这个事件，调用 API 加载更多数据并追加到 this.suppliers 或 this.clients 中
    },
};
</script>

<style scoped>
.app-container {
    display: flex;
    height: 74vh; /* 假设应用容器高度 */
    gap: 20px;
}
.column {
    flex: 1;
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.column h3 {
    margin-top: 0;
    margin-bottom: 10px;
}
/* 为 VirtualList 容器设置高度，使其能够滚动 */
.column .infinite-list-container {
    flex-grow: 1; /* 填充剩余空间 */
    height: auto; /* 覆盖 VirtualList 内部的 height: 100% */
}
.list-item {
    height: 30px; /* 与 itemHeight prop 保持一致 */
    line-height: 30px;
    border-bottom: 1px solid #eee;
    padding: 0 5px;
    box-sizing: border-box;
}
</style>