带有mat-grid-list的cdk virtualscroll [英] cdk virtualscroll with mat-grid-list

问题描述

是否存在与网格列表配合使用的虚拟滚动实现?我认为默认实现无法正常工作，因为每一行周围都应有一个元素.

Is there an virtual scroll implementation that works with the grid-list? I think the default implementation won't work because each row should have an element around it.

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

I'm using the grid-list to display profile pictures, and need an infinite scroll or preferably virtual scroll to load new ones.

推荐答案

因此，由于cdk virtualscroll不支持多列，因此我最终使用了

So since cdk virtualscroll doesn't support multi column, I ended up using ngx-virtual-scroller, which does support multi-columns. The mat-grid-list I also had to let go because of this, but, creating your own tiles isn't that much work when using flexbox.

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

Here's a snippet using multi columns, [users-online-tile] is a component that represents a user-picture with a name. The IsHandset boolean (from cdk) I use to set the height of the tile so more or less tiles are displayed depending on the screen size.

希望这对某人有帮助

    <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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！