如何实现一个前端虚拟列表组件-js教程-PHP中文网

如何实现一个前端虚拟列表组件

betcha

发布： 2025-11-15 22:15:43

原创

337人浏览过

实现虚拟列表的核心是只渲染可视区域内的项，通过计算滚动位置和项高度确定显示范围，用空白占位维持滚动高度，从而提升长列表性能。

如何实现一个前端虚拟列表组件

实现一个前端虚拟列表组件的核心思路是：只渲染可视区域内的列表项，而不是一次性渲染全部数据。这样可以极大提升长列表的性能表现，避免页面卡顿或内存占用过高。

理解虚拟列表的基本原理

当列表数据量很大时（比如上万条），如果全部渲染到 DOM 中，浏览器会因为节点过多而变慢甚至崩溃。虚拟列表通过以下方式解决这个问题：

计算容器高度和每个列表项的固定（或动态）高度
根据滚动位置确定当前可视区域包含哪些项
只渲染这些可视项，并在滚动时动态更新
用空白占位元素（padding 或 transform）保持整体滚动高度不变

实现步骤与关键代码逻辑

以一个简单的垂直滚动、固定高度项的虚拟列表为例，以下是核心实现结构：

1. 基础结构定义

立即学习“前端免费学习笔记（深入）”；

需要维护的数据包括：

containerHeight：可视区域高度
itemHeight：每项高度（假设固定）
data：完整数据数组
scrollTop：当前滚动偏移量

2. 计算可视区域项数

根据容器高度和项高，得出可视区域最多显示多少项：

const visibleCount = Math.ceil(containerHeight / itemHeight);

登录后复制

3. 计算起始和结束索引

ReportPlus数据报表中心小程序

ReportPlust意在打造一套精美的数据报表模板，里面高度封装日历组件、表格组件、排行榜组件、条形进度条组件、文本块组件以及ucharts的多个图表组件，用户只需要按照虚拟数据的格式，传特定数据即可方便、快捷地打造出属于自己的报表页面。该小程序主要使用了ucharts和wyb-table两插件实现的数据报表功能。特点使用的是uni-app中最受欢迎的图表uCharts插件完成图表展示，该插件

查看详情

根据滚动位置决定渲染哪一段数据：

const startIndex = Math.floor(scrollTop / itemHeight);
const endIndex = Math.min(startIndex + visibleCount + 1, data.length);

登录后复制

加1是为了留出缓冲项，防止滚动时白屏。

4. 渲染可视项并设置偏移

使用一个外层 div 作为滚动容器，内部用一个占位元素撑起总高度，中间只渲染可视项：

<div style="height: containerHeight; overflow: auto; position: relative;" onScroll={handleScroll}>
  <div style={{ height: totalHeight }}> <!-- 总内容高度占位 -->
    <div style={{ transform: `translateY(${startIndex * itemHeight}px)` }}>
      {data.slice(startIndex, endIndex).map((item, index) => (
        <div key={index} style={{ height: itemHeight }}>{item}</div>
      ))}
    </div>
  </div>
</div>

登录后复制