0

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

4

1 回答 1

1

The itemsize is the number of pixels per row so it may be trying to load more items than needed because it thinks your rows are each going to be 1px tall.

API reference for Angular CDK scrolling

itemSize: number - The size of the items in the list (in pixels).

于 2021-06-13T04:34:56.507 回答