具有动态可变高度/宽度的角度虚拟滚动？

Question

我正在寻找具有以下功能的角度虚拟滚动包：1) 水平虚拟滚动 2) 容器宽度和高度是可变的。 3) 项目宽度设置为容器宽度的百分比。 4）项目可以在渲染过程中最小化。

Angular cdk 目前使用固定的 itemSize 高度和宽度….这是一个应该如何呈现的例子：

 .parent {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 10px;
}
.child {
  width: 33.333%;
  height: 100%;
}
.child.mini {
  width: 40px;
}

 <div class="parent">
  <div class="child" *ngFor="let item of items" [class.mini]="item.isMini">
    <button (click)="item.isMini = !item.isMini">Minimize Me!</button>
    {{item.name}}
  </div>
</div>

有什么推荐吗？

原文由 Itai 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Angular 团队正在研究一个 autosize 指令，该指令允许滚动不同的项目大小。

您可以 在此处 查看使用 @angular/cdk-experimental 的示例。

请记住，这是实验性的，目前不推荐用于生产用途，但它确实给了你感觉，如果你真的需要它，它可能会有所帮助。

另外，查看 github问题

原文由 ronenmiller 发布，翻译遵循 CC BY-SA 4.0 许可协议