gpt4 book ai didi

angular - 带有 mat-grid-list 的 cdk virtualscroll

转载 作者:行者123 更新时间:2023-12-04 07:43:09 25 4
gpt4 key购买 nike

是否有适用于网格列表的虚拟滚动实现?我认为默认实现不起作用,因为每一行都应该有一个元素。
我正在使用网格列表来显示个人资料图片,并且需要无限滚动或最好是虚拟滚动来加载新图片。

最佳答案

所以由于 cdk virtualscroll 不支持多列,我最终使用了 ngx-virtual-scroller ,它确实支持多列。由于这个原因,我也不得不放弃 mat-grid-list,但是,在使用 flexbox 时,创建自己的图块并没有那么多工作。
这是一个使用多列的代码片段,[users-online-tile] 是一个组件,表示带有名称的用户图片。 IsHandset bool 值(来自 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>

关于angular - 带有 mat-grid-list 的 cdk virtualscroll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53477373/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com