模拟实现无限分页的不定高度虚拟列表##

2024-01-14 04:52:06

无限分页的不定高度虚拟列表：提升大数据列表渲染性能

前言

随着互联网高速发展，前端应用变得愈加复杂，尤其对于展示海量数据时，渲染效率成为一项严峻挑战。传统前端列表渲染方式往往一次性加载所有数据，这导致页面加载缓慢，特别是在数据量庞大的情况下。为此，虚拟列表技术应运而生，它仅渲染当前可视区域内的数据，从而提升页面加载速度。

而无限分页的虚拟列表，则结合了无限滚动和虚拟列表技术，实现无限滚动效果，同时规避一次性加载所有数据的性能问题。此技术对于展示大量数据且需滚动加载的应用非常适用。

原理

无限分页的不定高度虚拟列表实现原理如下：

将列表数据划分为若干分页，每个分页包含一定数量的数据项。
页面只渲染当前可视区域内的分页，并根据滚动条位置动态加载和卸载分页。
采用虚拟列表技术，仅渲染当前可视区域内的列表项，避免每次滚动重新渲染整个列表，提升渲染效率。

代码实现

接下来，我们利用 JavaScript 模拟实现一个无限分页的不定高度虚拟列表。首先构建 HTML 结构：

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

// 虚拟列表类
class VirtualList {
  constructor(container, data) {
    this.container = container;
    this.data = data;
    this.currentPage = 0;
    this.pageSize = 20;
    this.itemHeight = 50;
    this.init();
  }

  init() {
    this.renderList();
    this.bindScrollEvent();
  }

  renderList() {
    // 当前页数据
    const startIndex = this.currentPage * this.pageSize;
    const endIndex = startIndex + this.pageSize;
    const currentPageData = this.data.slice(startIndex, endIndex);

    // 清空列表
    this.container.innerHTML = '';

    // 渲染当前页数据
    currentPageData.forEach((item, index) => {
      const li = document.createElement('li');
      li.innerHTML = item;
      li.style.height = `${this.itemHeight}px`;
      this.container.appendChild(li);
    });
  }

  bindScrollEvent() {
    this.container.addEventListener('scroll', () => {
      // 是否需要加载更多数据
      if (this.container.scrollTop + this.container.clientHeight >= this.container.scrollHeight) {
        this.currentPage++;
        this.renderList();
      }
    });
  }
}

// 虚拟列表实例化
const list = new VirtualList(document.getElementById('list'), data);