时间戳

首页 > 解决方案 > Angular Material Scroll 加载的项目比预期的要多

angular - Angular Material Scroll 加载的项目比预期的要多

问题描述

我试图通过虚拟滚动组件加载 20 个项目，但我在页面加载后立即看到 34 个项目，根本没有进行任何滚动。我的css错了吗？还是我忘记了控件上的某些设置？该项目位于此处。

标签： angularangular-materialvirtualscrollangular-cdk-virtual-scroll

解决方案

Firebase 上的本教程说：

让我们先回顾一下虚拟滚动的几个重要概念。首先，您声明 cdk-virtual-scroll-viewport 组件以提供虚拟滚动的上下文。它应该有一个itemSize输入属性，定义为每个项目的像素高度。

您可以看到这并不是专门为网格滚动视图制作的，但我们可以解决这个限制：

您有 5 列图像，每列 160 像素高，加上边距顶部和底部每 10 像素，产生 180 像素。

现在我们计算 180 除以 5 得到 36。这就是itemSize你需要的。

<cdk-virtual-scroll-viewport itemSize="36">
  <div class="image" *cdkVirtualFor="let image of images">
    <a (click)="viewDetail(image)">
      <img src="https://picsum.photos/200/160/?image={{ image.id }}" />
    </a>
  </div>
</cdk-virtual-scroll-viewport>

查看StackBlitz 的这个分支

官方文档在这里：Angular | 滚动

您也可以更改缓冲区大小

<cdk-virtual-scroll-viewport itemSize="36" minBufferPx="540" maxBufferPx="540">
  <!-- ... -->
</cdk-virtual-scroll-viewport>

请参阅： 角度 | Scrolling # 在固定大小的项目上滚动

你也可以让 Angular 做数学运算：

<cdk-virtual-scroll-viewport itemSize="{{ 180 / 5 }}" minBufferPx="{{ 180 * 3 }}" maxBufferPx="{{ 180 * 3 * 3 }}">

这意味着您将提前加载三页（每页 3 行），如果只剩下一个页面缓冲区（每页 3 行图像），则加载更多

推荐阅读