Question

是否存在与网格列表配合使用的虚拟滚动实现？我认为默认实现不会起作用，因为每一行周围都应有一个元素。

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

Answer 1

因此，由于cdk virtualscroll不支持多列，因此我最终使用了ngx-virtual-scroller，它确实支持多列。正因为如此，我也不得不放弃了mat-grid-list，但是，使用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>

带有mat-grid-list的cdk virtualscroll

1 个答案: