cdk virtualscroll 与 mat-grid-list

2023-11-25

是否有与网格列表一起使用的虚拟滚动实现?我认为默认实现不起作用,因为每一行周围都应该有一个元素。

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


因此,由于 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(使用前将#替换为@)

cdk virtualscroll 与 mat-grid-list 的相关文章

随机推荐

  • Geopy:检索英文国家/地区名称

    我正在尝试反转地理编码坐标并使用 geopy 检索相应的国家 地区代码 然而 Geopy似乎没有提供获取国家代码的方法 因此 我尝试先检索国家 地区名称 然后将它们转换为代码 不幸的是 我的代码给了我非英语的国家 地区名称 如何获取英文国家
  • RxJS Observables 的 Promise.all 行为?

    在 Angular 1 x 中 我有时需要制作多个http请求并对所有响应执行某些操作 我会将所有的承诺放入一个数组中并调用Promise all promises then function results Angular 2 最佳实践似
  • 由于 rJava 导致尝试在 R 中加载包时出现问题

    当我打字时require xlsx 为了加载包xlsx在 R 中 显示以下消息 gt require xlsx Loading required package xlsx Loading required package xlsxjars
  • 将 Python argparse.Namespace() 视为字典的正确方法是什么?

    如果我想使用的结果argparse ArgumentParser 这是一个Namespace对象 具有需要字典或类似映射的对象的方法 请参阅集合 映射 正确的做法是什么 C gt python Python 2 7 3 default Ap
  • Typescript 索引签名和方法

    为什么下面的代码给出ts 2411 error class Greeter key string string number greeting string constructor message string this greeting
  • 如何删除ListBox中的多个选定项?

    我的 Windows 窗体包含两个列表框 Listbox1 包含一些项目 listbox2 为空 当我按下表单上的按钮时 应将 listbox1 中的多个选定项目从 Listbox1 中删除并复制到 Listbox2 中 我尝试在 list
  • JavaScript WeakMap 不断引用经过 gc 处理的对象

    我正在经历 JavaScript 弱映射 在 google chrome 开发者控制台中尝试此代码后 使用 js flags expose gc 运行 我不明白为什么弱映射继续引用 a b 如果 a 是GC 编辑 var a listene
  • Java中Arraylist转Json的方法

    我有一个数组列表 数组列表包含一堆域对象 如下图所示 Domain domainId 19 name a dnsName a com type 0 flags 0 Domain domainId 20 name b dnsName b co
  • 如何在客户端-服务器 PlayN 游戏中处理 RPC?

    我想使用 PlayN 创建客户端 服务器纸牌游戏 例如心 虽然我主要关注 HTML5 输出 但我希望与输出平台无关 以防我将来决定制作 Android 客户端 我应该如何处理RPC机制 这些是我想到的选项 通过 get post 方法将 J
  • Dynamodb:使用两个以上属性的查询

    在 Dynamodb 中 您需要在索引中指定可用于进行查询的属性 如何使用两个以上的属性进行查询 使用 boto 的示例 Table create users schema HashKey id defaults to STRING dat
  • 在 MKMapView 上移动/更新 MKOverlay

    有没有办法更新 即移动 aMKOverlay已经添加到MKMapView 删除旧的并添加新的非常糟糕 慢 即我想当覆盖物在屏幕上移动时触发调用此函数的后台函数 MKOverlayView mapView MKMapView mapView
  • 从远程 git 存储库获取单个文件

    有没有一种方法可以在 Java 中以编程方式从远程 git 存储库下载单个文件 我更喜欢使用尽可能少的带宽的解决方案 最好只下载单个文件 我不需要浏览存储库 我已经有了文件的路径 我更喜欢不依赖于其他应用程序的解决方案 例如 在计算机上安装
  • 如何启动和应用程序选择器

    该应用程序的任务是隐式激活一个单独的应用程序来查看 URL http www google com 因此 应用程序选择器应该出现并让我在至少两个浏览器之间进行选择 默认浏览器将向我显示 www google com 网站 另一个简单的 浏览
  • 需要 C# 中的 BouncyCastle PGP 文件加密示例

    我正在尝试使用我的私钥 ascii 格式 和任何其他公钥 也是 ascii 格式 加密文件 BouncyCastle 库看起来是正确的使用方式 但我找不到 C 的文档 谁能帮我举个例子 谢谢 以下是 BouncyCastle 示例中的一些代
  • 创建不包含外部依赖项的 JAR 文件

    是否可以创建需要外部依赖项的 JAR 文件 而不在 JAR 文件中包含这些依赖项 我的 google fu 未能给我答案 我发现的所有内容都显示了如何将它们包含在 JAR 文件中 但没有显示如何将它们放入清单文件中来表示 我还没有得到它们
  • 如何清除内存以防止VBA中的“内存不足错误”?

    我正在一个大型 Excel 电子表格上运行 VBA 代码 如何清除过程 调用之间的内存以防止发生 内存不足 问题 帮助释放内存的最佳方法是使大对象无效 Sub Whatever Dim someLargeObject as SomeObje
  • C++ 内联类方法导致未定义的引用

    当我尝试内联某个类的方法时 出现编译器错误 当我去掉 inline 关键字时它就起作用了 这是一个简化的示例 主要 cpp include my class h int main MyClass c c TestMethod return
  • 单击时搜索栏的拇指

    我想在搜索栏拇指上注册一个可点击事件 以便在用户单击它时触发事件 是否可以 结合 zwebie 和 Nermeens 的答案得出正确的解决方案 seekbar setOnSeekBarChangeListener new SeekBar O
  • 更好的蜜罐实施(形成反垃圾邮件)

    How do we get rid of these spambots on our site 每个网站都会成为受害者spambots在某一点 您的处理方式会影响您的客户 并且大多数解决方案可能会阻止某些人填写您的表格 这就是蜜罐技术的用武
  • cdk virtualscroll 与 mat-grid-list

    是否有与网格列表一起使用的虚拟滚动实现 我认为默认实现不起作用 因为每一行周围都应该有一个元素 我使用网格列表来显示个人资料图片 并且需要无限滚动或最好是虚拟滚动来加载新图片 因此 由于 cdk virtualscroll 不支持多列 我最