cdk virtualscroll с mat-grid-list - PullRequest
Новая
       30

cdk virtualscroll с mat-grid-list

0 голосов
/ 26 ноября 2018

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

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

1 Ответ

0 голосов
/ 21 декабря 2018

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

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