Angular CDK 虚拟滚动问题答案

【问题标题】：Angular CDK virtual scrolling issueAngular CDK 虚拟滚动问题
【发布时间】：2021-01-22 06:23:07
【问题描述】：

使用 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

【问题讨论】：

标签： ionic-framework angular-cdk virtualscroll angular-cdk-virtual-scroll

【解决方案1】：

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

API reference for Angular CDK scrolling

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

【讨论】：