是否有与网格列表一起使用的虚拟滚动实现?我认为默认实现不起作用,因为每一行周围都应该有一个元素。
我使用网格列表来显示个人资料图片,并且需要无限滚动或最好是虚拟滚动来加载新图片。
因此,由于 cdk virtualscroll 不支持多列,我最终使用ngx 虚拟滚动条,它确实支持多列。因此,我也不得不放弃 mat-grid-list,但是,使用 Flexbox 时创建自己的图块并不是那么容易。
这是一个使用多列的片段,[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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)