前端web虚拟列表实现

<style>
? .list-container {
? ? height: 400px;
? ? overflow-y: auto;
? }
? .list-item {
? ? height: 50px;
? ? line-height: 50px;
? ? border-bottom: 1px solid #ccc;
? }
</style>

<div class="list-container" id="listContainer">
? <div class="list-item" v-for="item in visibleItems" :key="item.id">
? ? {{ item.name }}
? </div>
</div>

<script>
? const listContainer = document.getElementById('listContainer');
? const listItemHeight = 50;
? const visibleItemCount = Math.ceil(listContainer.clientHeight / listItemHeight);
? let startIndex = 0;

? function updateVisibleItems() {
? ? const visibleItems = dataList.slice(startIndex, startIndex + visibleItemCount);
? ? // 更新可见区域的数据
? ? // ...
? }

? function handleScroll() {
? ? startIndex = Math.floor(listContainer.scrollTop / listItemHeight);
? ? // 更新起始索引
? ? // ...
? ? updateVisibleItems();
? }

? listContainer.addEventListener('scroll', handleScroll);

? // 初始化数据
? const dataList = [
? ? { id: 1, name: 'Item 1' },
? ? { id: 2, name: 'Item 2' },
? ? // ...
? ];

? updateVisibleItems();
</script>

前端虚拟列表是一种优化技术，用于处理大量数据的列表展示，以提高页面性能和用户体验。其原理是只渲染当前可见区域的数据，而不是将所有数据一次性渲染到页面上。

具体的实现步骤如下：

1. 获取列表数据：从后端获取完整的列表数据。

2. 计算可见区域：根据列表容器的高度和每个列表项的高度，计算出可见区域可以容纳的列表项数量。

3. 渲染可见区域：根据可见区域的数量，只渲染这些列表项到页面上。

4. 监听滚动事件：监听列表容器的滚动事件，根据滚动位置动态计算当前可见区域的起始索引。

5. 更新可见区域：根据起始索引和可见区域的数量，更新可见区域的数据，并重新渲染到页面上。