13

我想cdk-virtual-scroll-viewport在 TimeLine 视图中使用不同高度的项目。

itemSize="x"因此，根据文档，设置哪个是指列表中项目的大小（以像素为单位），是不切实际的。

autosize尚不可用。

是否可以使用cdk-virtual-scroll-viewport可变项目大小的虚拟/无限滚动？

更新

我一直在寻找替代的虚拟/无限滚动解决方案，我几乎不敢相信，似乎没有适用于动态行高的解决方案，即使使用https://github.com/rintoj/ngx-virtual-scroller也不推荐.

2019 年 7 月更新 2

由于同时仍然没有解决方案，我认为解决此问题的“足够好”的方法是加载固定数量的项目，并在列表底部添加一个按钮以加载更多项目，如下例所示：https://stackblitz.com/edit/ang-mat-load-more

4

5 回答 5

6

自动调整大小对我有用。

尝试安装：

"@angular/cdk": "6.2.0",
"@angular/cdk-experimental": "6.2.0"

然后将ScrollingModule导入您的模块：

import {ScrollingModule} from "@angular/cdk-experimental";

imports: [ScrollingModule]

那么你可以使用如下的autosize属性：

 <cdk-virtual-scroll-viewport autosize style="height: 100%">
于 2020-12-20T20:14:28.790 回答
2

在 CDK 中提供此功能之前，我通过侦听本机元素的 onscroll 事件绕过它，然后在滚动到底部的偏移量为 0 时做出响应

@ViewChild(CdkVirtualScrollViewport, { static: false })
public virtualScrollViewport?: CdkVirtualScrollViewport;

...

ngAfterViewInit() {
  this.virtualScrollViewport.elementRef.nativeElement.onscroll = (e) => { this.onScroll(e) };
}

onScroll(e) {
  var scrollOffset = this.virtualScrollViewport.measureScrollOffset("bottom");

  if (scrollOffset == 0) {
    this.fetchMoreData();
  }
}
于 2020-01-30T19:04:11.827 回答
1

这个 CSS 对我有用。无需固定高度：

<cdk-virtual-scroll-viewport class="viewport">  
   .......
</cdk-virtual-scroll-viewport>

.viewport { 
   display: contents;
}
于 2020-09-24T20:20:15.600 回答
0

itemSize="x" 无助于设置高度......您必须使用 CSS 自己分配任意高度。

来到您的问题，可变项目大小不应该是虚拟滚动的问题......您可以在此示例中更改数组以非常快速地查看可能性和结果。

于 2019-01-14T11:12:23.430 回答
0

可以使用 [ngStyle] 动态设置 cdkvirtualscrollviewport 高度

          <cdk-virtual-scroll-viewport
        itemSize="parent?.children.length"
        [ngStyle]="{'height.px': parent?.children.length<10? parent?.children.length*42 :250 }"
      >
于 2020-06-29T16:46:29.190 回答