Skip to content

VirtualList 虚拟列表

TIP

translate3d 偏移: 这是虚拟列表的核心。我们并没有把 DOM 节点真的删掉再插入,而是只渲染这十几条,然后通过 CSS 把它们推到正确的位置。例如,当你滑到第 1000 行时,虽然这是 DOM 里的第 1 个元素,但它的 transformY 可能是 60000px。

TIP

缓冲区 (bufferCount): 代码中设置了 bufferCount = 5。这意味着如果你屏幕能显示 10 条,实际 DOM 会渲染 20 条(上面藏 5 条,下面藏 5 条)。当你快速滑动时,不会立刻看到白屏,体验会更像原生滚动。

TIP

Footer 的绝对定位: 在虚拟列表中,Footer 不能简单地写在列表下面,因为它会被 absolute 的列表内容覆盖。所以我们计算了 totalContentHeight,强行把 Footer 定位到列表的最底端。

基本使用