定高虚拟列表

主要观点总结

本文主要介绍了虚拟列表，特别是定高虚拟列表的概念、应用场景和具体实现方式。对于包含大量数据的长列表，虚拟列表能够解决性能问题，提高用户体验。

关键观点总结

关键观点1: 虚拟列表的引入

针对长列表渲染性能问题，引入虚拟列表概念。在特殊场景下，如设备性能有限或数据量大时，直接渲染长列表可能导致卡顿，虚拟列表通过只渲染可视区域内的数据来解决这一问题。

关键观点2: 定高虚拟列表的原理

在定高虚拟列表中，根据可视区域的高度和每个item的高度计算可视区域内应渲染的item数量。通过确定列表的首位索引和末尾索引，以及滚动时更新这些索引，实现滚动条的功能。同时，通过添加一个全列表高度的元素（placeholder）来确定滚动容器内的元素总数。

关键观点3: 实现细节

实现定高虚拟列表的关键包括确定可视区域内的元素数量、计算首位索引和末尾索引、添加placeholder元素以及处理滚动条的逻辑。此外，还需注意计算placeholder元素的高度，以及使用绝对定位来避免遮挡可视区域内的渲染列表。

关键观点4: 代码示例分析

提供的代码示例展示了如何实现定高虚拟列表的某些方面，包括数据处理、计算滚动条高度、以及使用Vue框架的v-for指令来渲染可视区域内的列表项。同时，通过样式设置确保了内容的正确展示和滚动条的定位。

文章预览

有的特殊场景我们不能分页，只能渲染一个长列表。这个长列表中可能有几万条数据，如果全部渲染到页面上用户的设备差点可能就会直接卡死了，这时我们就需要虚拟列表来解决问题。 定高虚拟列表 在定高的虚拟列表中，我们可以根据可视区域的高度和每个 item 的高度计算得出在可视区域内可以渲染多少个 item 。不在可视区域里面的 item 那么就不需要渲染了（不管有几万个还是几十万个 item ），这样就能解决长列表性能很差的问题啦。 如何实现定高虚拟列表呢？ 如何实现滚动条 确定可视区域内有多少元素 确定列表的首位索引和末尾索引 滚动的时候更新首位索引和末尾索引 如何实现滚动条 在 container 里加一个全列表高度的元素 placeholder ,假设每个元素的高度是 100,滚动的容器的高度 list.length*item.height 。其中 placeholder 采用绝对定位，为了 ………………………………