6

我正在寻找具有以下功能的角度虚拟滚动包：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>

有什么推荐吗？

4

4 回答 4

3

Angular 团队正在研究一个autosize指令，该指令可以使用不同的项目大小进行滚动。

@angular/cdk-experimental 您可以在此处查看使用示例。
请记住，这是实验性的，目前不建议在生产环境中使用，但它确实会给你一种感觉，如果你真的需要它，它会有所帮助。

另外，请查看github 问题

于 2019-06-17T10:05:13.097 回答
2

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

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

于 2019-12-18T04:53:58.383 回答
1

ag-virtual-scroll组件支持具有不同行高的虚拟滚动，但滚动只能垂直工作。

NPM：https ://www.npmjs.com/package/ag-virtual-scroll

演示页面：https ://ericferreira1992.github.io/ag-virtual-scroll/ （第二个例子）

于 2020-08-26T14:05:50.687 回答
0

如果您不想像autosize前面提到的那样进行指令，

这是另一种方法：

我通过动态传入高度值解决了这个问题：

<cdk-virtual-scroll-viewport #scrollViewport 
[itemSize]="itemSize" [style.height.px]="viewPortHeight">
</cdk-virtual-scroll-viewport>

请注意：我的视口组件放在<ng-template>;

itemSize并且viewPortHeight是在上下文中定义的变量。

于 2021-06-04T02:45:42.317 回答