具有可变项目高度的 cdk-virtual-scroll-viewport

Question

我想在具有不同高度的项目的时间线视图中使用cdk-virtual-scroll-viewport 。

因此，根据文档，设置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

Answer 1

autosize对我有用。

尝试安装：

"@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%">

Answer 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();
  }
}

Answer 3

itemSize="x" 并不能帮助设置高度......你必须使用 CSS 自己分配一个任意的高度。

• 参考： Angular 7 上的虚拟滚动 - 默认情况下高度为零

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

Answer 4

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

          <cdk-virtual-scroll-viewport
        itemSize="parent?.children.length"
        [ngStyle]="{'height.px': parent?.children.length<10? parent?.children.length*42 :250 }"
      >

Answer 5

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

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

.viewport { 
   display: contents;
}

Answer 6

最后我找到了解决方案：就我而言，我最近使用的是 @angular/cdk 版本 12.2.13，所以你也应该安装 @angular/cdk-experimental 和版本 12.2.13（相同的版本）。

转到 app.module.ts：添加这一行：

import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling';
import { ScrollingModule } from '@angular/cdk/scrolling';

和进口：

[ScrollingModule,
    ExperimentalScrollingModule]

然后这样做：

<cdk-virtual-scroll-viewport
          autosize
          style="height: 100%"
          class="container"
        >
your content
</cdk-virtual-scroll-viewport>

它对我有用。

Answer 7

唯一对我有用的是 stackblitz 的splaktar 示例

模板：

<cdk-virtual-scroll-viewport [itemSize]="itemSize" class="example- 
viewport">
<div *cdkVirtualFor="let item of items"
   [style.height]="itemSize + 'px'">{{item}}</div>
</cdk-virtual-scroll-viewport>
<br>
<div>
<label for="height">Item Size:</label>
<input id="height" type="number" [(ngModel)]="itemSize">
</div>

零件：

import {ChangeDetectionStrategy, Component} from '@angular/core';

@Component({
selector: 'cdk-virtual-scroll-overview-example',
styleUrls: ['cdk-virtual-scroll-overview-example.css'],
templateUrl: 'cdk-virtual-scroll-overview-example.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CdkVirtualScrollOverviewExample {
items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
itemSize = 80;
}