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

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>

有什么推荐吗？

Answer 1

Angular 团队正在开发一个autosize指令，该指令可以滚动不同大小的项目。

@angular/cdk-experimental 您可以在此处查看使用的示例。
请记住，这是实验性的，目前不建议用于生产用途，但它确实给您带来了感觉，如果您确实需要它，它可能会有所帮助。

另外，查看github问题

Answer 2

您可以尝试ngx-ui-scroll。说到您的要求，它支持

• 水平方向，
• 动态物品尺寸，
• 后期物品尺寸发生变化。

不确定 %-base 尺寸，我想您必须重新考虑应用程序中的模板。模板和数据流...希望这有帮助。