CDK 虚拟滚动问题 maxBufferPx 未显示完整列表

Question

我正在为一个大列表实现 CDK 虚拟滚动，虽然仅使用

minBufferPx

即可顺利滚动，但在添加

maxBufferPx

时遇到问题。如果没有它，我会收到此控制台错误：

Error: CDK virtual scroll: maxBufferPx must be greater than or equal to minBufferPx

但是，当我将

minBufferPx

设置为 500 并将

maxBufferPx

设置为 1000 时，列表将停止渲染所有项目，并且仅显示少数项目。我觉得我错过了一些简单的东西，但无法完全弄清楚。

这是我准备的一个演示，它复制了我的问题。

有什么建议/想法吗？

Answer 1

您向

itemSize

输入传递了错误的值。根据 docs，CDK 期望一个列表项的高度（以像素为单位）。您正在传递项目的数量，这会产生错误的结果。一旦通过传递

48

（这是一个折叠扩展面板的高度）修复了该错误，虚拟滚动就可以在设置

minBufferPx

和

maxBufferPx

的情况下正常工作。

<cdk-virtual-scroll-viewport
  class="viewport"
  minBufferPx="500"
  maxBufferPx="1000"
  itemSize="48"
>

另请检查更新的 StackBlitz。