本文介绍了带有 mat-grid-list 的 cdk virtualscroll的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否有适用于网格列表的虚拟滚动实现?我认为默认实现不起作用，因为每一行都应该有一个元素.
我使用网格列表来显示个人资料图片，需要无限滚动或最好是虚拟滚动来加载新图片.
解决方案
所以由于 cdk virtualscroll 不支持多列，我最终使用了 ngx-virtual-scroller，支持多列.由于这个原因，我也不得不放弃 mat-grid-list，但是，在使用 flexbox 时，创建自己的图块并没有那么多工作.
这是一个使用多列的代码片段，[users-online-tile] 是一个组件，表示带有名称的用户图片.IsHandset 布尔值(来自 cdk)我用来设置磁贴的高度，以便根据屏幕大小显示更多或更少的磁贴.
希望这对某人有帮助
<div [ngClass]="{'users-online-tile' : (isHandset$ | async), 'users-online-tile-desktop' : !(isHandset$ | async) }";*ngFor=让用户使用滚动项"><div [users-online-tile]=用户"[isHandset]=(isHandset$ | async)"></div><!-- <div class="item">{{user.userName}}</div>-->
</virtual-scroller>
Is there a 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.
解决方案
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.
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.
Hope this helps someone
<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
