Angular cdk-virtual-scroll 具有包装和响应能力

Question

我正在查看cdk-virtual-scroll 并希望我可以在我现有的应用程序中使用它，其中我有一个包含项目的视图，其宽度因屏幕尺寸而异（例如手机与平板电脑等）

分叉this example，我有一个modified version here。

我的修改是在App/cdk-virtual-scroll-overview-example.css 上，我已将 css 更改为包含以下内容..

.example-viewport {
      height: 200px;
      width: 90%;
      border: 1px solid black;
      display: flex;
      flex-direction:  row;
      flex-wrap:  wrap
    }

    .example-item {
      height: 50px;
      background: red;
      margin:0.5px;
      width: 33%
    }

      @media screen and (min-width: 360px)  {
       .example-item {
          width: 45%
         }
       }

所以我的目标是让项目根据屏幕尺寸连续显示 2 个或 3 个。但是，可以看出，它们似乎根本没有包裹......

我在这里使用了 flex（我做错了吗？），但是任何可以让它工作的 css 都可以（可能是 flex grid 或其他）

这可以使用cdk-virtual-scroll吗？

提前致谢

Answer 1

您可以通过根据每行所需的数量对项目进行分块来解决此问题，然后在虚拟滚动中添加 ngFor 以迭代每个块。然后就可以在chunk div上显示flex了。