cdk-virtual-scroll-viewport с переменной высотой элемента

Question

Я хотел бы использовать cdk-virtual-scroll-viewport в представлении временной шкалы с элементами разной высоты.

Итак, постановка itemSize="x" который, согласно документации, относится к размеру элементов в списке (в пикселях), нецелесообразен.

autosize еще не доступен

Можно ли вообще использовать виртуальную / бесконечную прокрутку с cdk-virtual-scroll-viewport с переменными размерами элементов?

Answer 1

авторазмер работает для меня.

Попробуйте установить:

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

Наконец, я нашел решение: в моем случае я недавно использовал @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 3

Пока эта функция не будет предложена в 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 4

itemSize="x" не помогает установить высоту... вам придется использовать CSS, чтобы назначить произвольную высоту самостоятельно.

• ref: виртуальная прокрутка на Angular 7 - высота по умолчанию равна нулю

Что касается вашего вопроса, переменные размеры элементов не должны быть проблемой с виртуальной прокруткой... вы можете изменить массив в этом примере, чтобы увидеть возможность и результаты очень быстро.

Answer 5

Этот CSS мне подходит. Не требуется фиксированной высоты:

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

.viewport { 
   display: contents;
}

Answer 6

Единственное, что у меня сработало, это пример splaktar на stackblitz.

Шаблон:

      <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;
}

Answer 7

Можно динамически установить высоту cdkvirtualscrollviewport с помощью [ngStyle]

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