虚拟列表的简单实现

前端

2023-10-11 01:32:27

前言

在一些业务场景中，前端会遇到不能分页的列表，并且当列表数据量比较大时（比如超过1万条），就会影响到页面的性能。这时就需要我们做优化了，而虚拟列表便是其中的一种方式。

虚拟列表的实现原理

虚拟列表的原理很简单，它只渲染当前视口内的列表项，而当用户滚动时再动态加载其他列表项。这样就可以大大减少页面需要渲染的DOM元素数量，从而提高页面的性能。

要实现虚拟列表，需要用到以下几个关键技术：

滚动事件监听： 当用户滚动列表时，需要监听滚动事件，并根据滚动的位置来判断是否需要加载更多列表项。
懒加载： 当需要加载更多列表项时，需要使用懒加载技术，只加载当前视口内的列表项，而将其他列表项延迟到需要时再加载。
DOM操作： 当加载到新的列表项时，需要使用DOM操作将它们添加到列表中。

虚拟列表的简单实现

下面我们来演示一下虚拟列表的简单实现。

首先，我们需要创建一个空列表容器：

<div id="list-container"></div>

然后，我们需要监听列表容器的滚动事件：

document.getElementById('list-container').addEventListener('scroll', function() {
  // 获取列表容器的滚动位置
  var scrollTop = this.scrollTop;

  // 获取列表容器的高度
  var containerHeight = this.clientHeight;

  // 获取列表项的高度
  var itemHeight = document.querySelector('.list-item').clientHeight;

  // 计算当前视口内的列表项数量
  var visibleItemCount = Math.floor(containerHeight / itemHeight);

  // 计算当前视口内的第一个列表项的索引
  var firstVisibleItemIndex = Math.floor(scrollTop / itemHeight);

  // 计算当前视口内的最后一个列表项的索引
  var lastVisibleItemIndex = firstVisibleItemIndex + visibleItemCount - 1;

  // 加载当前视口内的列表项
  for (var i = firstVisibleItemIndex; i <= lastVisibleItemIndex; i++) {
    // 创建一个新的列表项
    var item = document.createElement('div');
    item.classList.add('list-item');

    // 设置列表项的内容
    item.innerHTML = '列表项 ' + i;

    // 将列表项添加到列表容器中
    this.appendChild(item);
  }
});