web-dev-qa-db-ja.com

アイテムの高さが可変のcdk-virtual-scroll-viewport

高さの異なるアイテムを含むTimeLineビューでcdk-virtual-scroll-viewportを使用したいと思います。

したがって、itemSize="x"の設定は、ドキュメントによればリスト内のアイテムのサイズ（ピクセル単位）であり、実用的ではありません。

autosizeはまだ使用できません。

cdk-virtual-scroll-viewport vith可変アイテムサイズで仮想/エンドレススクロールを使用することはまったく可能ですか？

更新

私は代替の仮想/無限スクロールソリューションを探していましたが、信じられないほど、動的な行の高さで動作するnoソリューションがあるようです https： //github.com/rintoj/ngx-virtual-scroller 推奨されません。

2019年7月2日更新

その間まだ解決策がないので、これを回避する「十分に良い」方法は、固定数のアイテムをロードし、次の例のように、リストの下部にさらにアイテムをロードするボタンを追加することだと思います。 https://stackblitz.com/edit/ang-mat-load-more

angularangular7virtualscroll
5
yglodt

itemSize = "x"は高さの設定に役立ちません...任意の高さを自分で割り当てるにはCSSを使用する必要があります。

あなたの質問に来ると、可変アイテムサイズは仮想スクロールの問題ではないはずです...配列を変更して この例では を変更して、可能性と結果を非常にすばやく確認できます。

1
Akber Iqbal

この機能が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();
  }
}
0
Richard Medeiros