バーチャルスクローラー

VirtualScrollerは、大量のデータを効率的にレンダリングするための高性能なアプローチです。

インポート#


import { VirtualScroller } from 'primereact/virtualscroller';

基本#

VirtualScrollerは、表示するデータとしてitems、アイテムの寸法としてitemSize、アイテムごとのコンテンツを定義するitemTemplateを必要とします。ビューポートのサイズは、scrollWidth、scrollHeightプロパティを直接使用するか、CSSのwidthとheightスタイルを使用して設定します。


<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} 
    className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />

水平方向#

orientationをhorizontalに設定すると、水平スクロールが有効になります。この場合、itemSizeはアイテムの幅を参照する必要があります。


<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} orientation="horizontal"
    className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />

グリッド#

orientationがbothに設定されている場合、垂直方向と水平方向のスクロールを有効にできます。このモードでは、itemSizeは、最初の値がアイテムの高さ、2番目の値が幅である配列である必要があります。


<VirtualScroller items={items} itemSize={[50, 100]} itemTemplate={itemTemplate} orientation="both" 
    className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />

遅延#

delayプロパティは、レンダリングの最適化のためにスクロール中にミリ秒単位で待つ閾値を追加します。

遅延なし

150ms

500ms


<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} delay={150} />
<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} delay={500} />

読み込み中#

ビジー状態は、showLoaderプロパティを追加することで有効になり、デフォルトではモーダルでUIをブロックします。または、loadingTemplateを使用して、Skeletonなどを使用してアイテムをカスタマイズできます。

モーダル

スケルトン


<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} showLoader delay={250} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} showLoader delay={250} loadingTemplate={loadingTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />

遅延読み込み#

遅延読み込みモードは、大規模なデータセットを処理するのに便利です。データ全体を読み込む代わりに、必要に応じて少量のデータがオンデマンドで読み込まれます。遅延読み込みを実装するには、lazyプロパティを有効にし、onLazyLoadコールバックを実装してデータを取得します。


<VirtualScroller items={lazyItems} itemSize={50} itemTemplate={itemTemplate} lazy onLazyLoad={onLazyLoad} 
    loadingTemplate={loadingTemplate} showLoader loading={lazyLoading} 
    className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />

アクセシビリティ#

スクリーンリーダー

VirtualScrollerは、アイテムをリストするためにセマンティックなリスト要素を使用します。特定の役割は強制されませんが、有効な属性はコンテナ要素に渡されるため、任意のaria役割と属性を使用できます。リスト要素は、listPropsプロパティを使用してアクセシビリティのためにカスタマイズすることもできます。

キーボードサポート

コンポーネントには、ビルトインのインタラクティブな要素は含まれていません。