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

Question

我正在查看 cdk-virtual-scroll 并希望我可以在我现有的应用程序中使用它，其中我有一个包含元素的 View ，其宽度因屏幕尺寸而异(例如电话与平板电脑等)

fork 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 以迭代每个 block 。然后你可以在 chunk div 上显示 flex。