Angular CDK 虚拟滚动问题

问题描述

使用 Angular CDK 虚拟滚动呈现巨大列表时遇到问题。 需要将 itemsize 设置为 1 才能正确加载列表。

预期根据视口大小加载列表。 但它的负载远远超过视口大小。 视口大小为 20 个项目，它将一次加载 200 多个项目。

示例：

<cdk-virtual-scroll-viewport [itemSize]="1" style="height: 100%">
        <div *cdkVirtualFor="let item of items;
                   let index = index;
                   let count = count;
                   let first = first;
                   let last = last;
                   let even = even;
                   let odd = odd; templateCacheSize: 0">
            <app-group [item]="item" [index]="index"></app-group>
        </div>
    </cdk-virtual-scroll-viewport>

https://ionic-angular-v5-virtual-scroll-issue-cdk.stackblitz.io

代码使用的是 Ionic 5 + Angular。 不使用 Ion-virtual-scroll 的原因是参考了团队的建议。 https://github.com/ionic-team/ionic-framework/issues/22792

解决方法

itemsize 是每行的像素数，因此它可能会尝试加载比需要更多的项目，因为它认为您的每一行都是 1px 高。

API reference for Angular CDK scrolling

itemSize: number - 列表中项目的大小（以像素为单位）。