cdk virtualscroll with mat-grid-list答案

【问题标题】：cdk virtualscroll with mat-grid-listcdk virtualscroll with mat-grid-list
【发布时间】：2021-02-09 17:59:00
【问题描述】：

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

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

【问题讨论】：

您找到解决方案了吗？我正在寻找类似的东西。
@emillime 我最终使用了 ngx-virtual-scroller，并推出了我自己的图块，这实际上并没有太多工作，而且效果很好。

标签： angular angular7 angular-material2 angular-cdk virtualscroll

【解决方案1】：

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

这是一个使用多列的 sn-p，[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 这样的响应能力的？与 mat-grid-list 一样，我们可以更改一行中的列数。你在使用简单的 div 时是怎么做的？你能指导我吗？
@user3768904 就像我在回答中所说的那样：我使用 IsHandset（来自 cdk）来确定设备是否是手机。我将该布尔值传递给我的“users-online-tile”组件。在组件中，我使用一个简单的 ngClass 在手机高度和桌面之间切换。这样一来，显示的图块数量就会或多或少。
@ElgerMensonides 这仍然是创建可滚动网格的唯一方法吗？
@PaxForce 据我所知是的，不幸的是
我试过这段代码，但它只显示一个列