はじめに

可変・動的なItem Heightに対応するAngular CDK Virtual Scroll。

@rdlabo/ngx-cdk-scroll-strategies は、可変・動的なItem Heightを扱うAngular CDK Virtual Scroll Strategyです。Virtual Scrollで使う配列の各Item Sizeを個別に指定し、高さが異なるListを正確なScroll Geometryで描画できます。

固定の[itemSize]や、[autosize]による平均Item Sizeの推定の代わりに、[itemDynamicSizes]へ既知または計測した高さを渡します。@angular/cdk/scrollingで動作し、Ionicには依存しません。

インストール

npm install @rdlabo/ngx-cdk-scroll-strategies

既知の高さで完結したViewportは シンプルな使い方 を見てください。

すべてのデータアイテムに対し、同じ順序で対応する itemDynamicSizes のエントリが 1 つ必要です。各 itemSize は 0 より大きい有限の数値でなければなりません。Angular がデータとサイズのシグナルを別ターンで更新した場合、ストラテジーは長さが一致するまで最後の完全なジオメトリを保持し、未知の高さは推定しません。

このStrategyが適するケース

• List ItemやRowごとに高さが異なる
• Text、Image、展開状態などから動的なItem Heightを計算または計測できる
• Variable HeightでもscrollToIndexやScroll Positionを正確に扱いたい
• Chat UIのようなReverse Virtual Scrollを実装したい

Item Heightが事前に分からない場合は、応用的な使い方のように計測した値を渡します。未知のDOM Heightをすべて自動検出するDrop-in Strategyではありません。

このLibraryは主にVirtual scrolling of content with variable height with Angularを基にしています。

目的から選ぶ