vue3虚拟列表

virtualList

<template><div class="virtual-list-container" ref="containerRef" @scroll="handleScroll"><!-- 这个元素撑开滚动条，高度为所有数据的总高度 --><div class="virtual-list-phantom" :style="{ height: totalHeight + 'px' }"></div><!-- 这个元素承载实际渲染的列表项，通过 transform 进行偏移 --><div class="virtual-list-content" :style="{ transform: `translateY(${offsetY}px)` }"><divv-for="item in visibleData":key="item.id"class="virtual-list-item":style="{ height: itemHeight + 'px' }"><!-- 使用插槽允许自定义列表项内容 --><slot name="scope" :scope="item"></slot></div></div></div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'// 定义组件属性
const props = defineProps({data: {type: Array,required: true},itemHeight: {type: Number,required: true},containerHeight: {type: Number,required: true},buffer: {type: Number,default: 5}
})const containerRef = ref() // 容器DOM引用
const scrollTop = ref(0) // 当前滚动距离// 计算总高度（所有数据项的高度和）
const totalHeight = computed(() => props.data.length * props.itemHeight)// 计算可视区域能容纳的项目数量
const visibleCount = computed(() => Math.ceil(props.containerHeight / props.itemHeight))// 计算起始索引（从第几条数据开始渲染）
const startIndex = computed(() => {return Math.floor(scrollTop.value / props.itemHeight)
})// 计算结束索引（考虑到缓冲区和可视数量）
const endIndex = computed(() => {return Math.min(props.data.length, startIndex.value + visibleCount.value + props.buffer * 2)
})// 计算Y轴偏移量，确保当前起始项位于可视区域顶部
const offsetY = computed(() => startIndex.value * props.itemHeight)// 计算当前真正需要渲染的可见数据片段
const visibleData = computed(() => {const start = Math.max(0, startIndex.value - props.buffer)return props.data.slice(start, endIndex.value)
})// 处理滚动事件，更新scrollTop
const handleScroll = (e) => {scrollTop.value = e.target.scrollTop
}onMounted(() => {// 可选：确保容器高度正确设置if (containerRef.value) {containerRef.value.style.height = props.containerHeight + 'px'}
})
</script>
<style scoped>
.virtual-list-container {position: relative;overflow-y: auto; /* 允许垂直滚动 */width: 100%;
}
.virtual-list-phantom {position: absolute;left: 0;top: 0;right: 0;z-index: -1; /* 置于底层，不干扰内容 */
}
.virtual-list-content {position: absolute; /* 绝对定位，脱离文档流 */left: 0;right: 0;top: 0;
}
.virtual-list-item {/* 你的列表项样式，确保高度与itemHeight属性一致 */box-sizing: border-box;
}
</style>

使用组件

	<template><div class="page-className"><VirtualList :data="list" :itemHeight="50" :containerHeight="400"><template #scope="{ scope }"><div>{{ scope.name }}</div></template></VirtualList></div>
</template>
<script setup name="ComponentName">
import { onMounted, ref } from 'vue'
import VirtualList from '@/components/virtualList/index.vue'const list = ref([])/*** 生成一个指定长度的数组* @param {number} length - 需要生成的数组长度* @param {Function} [generatorFn] - 可选参数，用于生成每个数组元素的函数。该函数接收当前元素的索引作为参数。* @returns {Array} 返回一个新数组*/
function generateArray(length, generatorFn) {// 基础参数校验if (typeof length !== 'number' || length < 0 || !Number.isInteger(length)) {throw new TypeError('参数 length 必须是一个非负整数')}// 使用 Array.from 创建数组。{ length: length } 创建一个指定长度的类数组对象。// 第二个参数是一个映射函数，它接收当前值（下划线 _ 表示未使用）和索引 index。return Array.from({ length: length },(_, index) => (generatorFn ? generatorFn(index) : index) // 如果提供了 generatorFn，则使用它生成元素，否则使用索引值)
}
onMounted(() => {list.value = generateArray(10000, (i) => {return {name: i + 1}})console.log(list.value)
})
</script>
<style scoped lang="scss"></style>