cdk virtualscroll 与 mat-grid-list

Question

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

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

Answer 1

因此，由于 cdk virtualscroll 不支持多列，我最终使用了支持多列的 ngx-virtual-scroller。因此，我也不得不放弃 mat-grid-list，但是，使用 flexbox 时，创建自己的 tiles 并没有那么多工作。

这是一个使用多列的代码段，[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>

cdk virtualscroll 与 mat-grid-list

cdk virtualscroll with mat-grid-list

angular

angular7

angular-material2

angular-cdk

virtualscroll