cdk virtualscroll与mat网格列表

Question

是否有一个可用于网格列表的虚拟滚动实现？我认为默认实现不起作用，因为每一行都应该有一个元素

我使用网格列表来显示个人资料图片，需要无限滚动或最好是虚拟滚动来加载新图片。

Answer 1

因此，由于cdk virtualscroll不支持多列，我最终使用了ngx虚拟滚动器，它确实支持多列。因此，我也不得不放弃垫子网格列表，但是，在使用flexbox时，创建自己的瓷砖并不是那么容易。

这里有一个使用多列的片段，[users-online tile]是一个表示带有名称的用户图片的组件。我使用IsHandset布尔值(来自cdk(来设置瓦片的高度，以便根据屏幕大小显示或多或少的瓦片。

希望这能帮助

<virtual-scroller [items]="users" (vsUpdate)="onVsUpdate($event)" (vsEnd)="fetchMore($event)"
(vsChange)="onVsChange($event)" [scrollbarWidth]="20" [scrollbarHeight]="100" [bufferAmount]="100">
<div [ngClass]="{ 'users-online-tile' :  (isHandset$ | async), 'users-online-tile-desktop' : !(isHandset$ | async) }" 
*ngFor="let user of scrollItems">
<div [users-online-tile]="user" [isHandset]="(isHandset$ | async)"></div>
<!-- <div class="item">{{user.userName}}</div> -->
</div>
</virtual-scroller>