angular - 具有可变项目高度的 cdk-virtual-scroll-viewport

Question

我想在具有不同高度的项目的 TimeLine View 中使用 cdk-virtual-scroll-viewport。

因此设置 itemSize="x" 是不切实际的，根据文档，列表中项目的大小(以像素为单位)。 p>

autosize 尚不可用。

是否可以通过可变项目大小的 cdk-virtual-scroll-viewport 使用虚拟/无限滚动？

更新

我一直在寻找替代的虚拟/无限滚动解决方案，我几乎不敢相信，似乎没有解决方案适用于动态行高，即使是 https://github.com/rintoj/ngx-virtual-scroller不推荐。

2019 年 7 月更新 2

由于同时仍然没有解决方案，我相信解决此问题的“足够好”的方法是加载固定数量的项目，并在列表底部添加一个按钮以加载更多项目，例如这个例子:https://stackblitz.com/edit/ang-mat-load-more

Answer 1

autosize 适合我。

尝试安装:

"@angular/cdk": "6.2.0",
"@angular/cdk-experimental": "6.2.0"

然后将 ScrollingModule 导入到您的模块中:

import {ScrollingModule} from "@angular/cdk-experimental";

imports: [ScrollingModule]

然后你可以像下面那样使用autosize属性:

 <cdk-virtual-scroll-viewport autosize style="height: 100%">