如何解决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 - 列表中项目的大小(以像素为单位)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。