前端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. 更新可见区域：根据起始索引和可见区域的数量，更新可见区域的数据，并重新渲染到页面上。