cdk virtualscroll с mat-grid-list

Question

Есть ли виртуальная реализация прокрутки, которая работает с сеткой? Я думаю, что реализация по умолчанию не будет работать, потому что каждая строка должна иметь элемент вокруг него.

Я использую сетку для отображения изображений профиля, и мне нужна бесконечная прокрутка или, предпочтительно, виртуальная прокрутка для загрузки новых.

Answer 1

Так как cdk virtualscroll не поддерживает мультиколонку, я остановился на https://github.com/rintoj/ngx-virtual-scroller, который поддерживает несколько колонок. Mat-grid-list я также должен был отпустить из-за этого, но создание собственных плиток не так уж много работы при использовании flexbox.

Вот фрагмент, использующий несколько столбцов, [users-online-tile] - это компонент, представляющий изображение пользователя с именем. IsHandset boolean (из 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>