メインコンテンツにスキップ
バージョン: v8

仮想スクロール

（日本語訳不要：警告アイコンのSVG）ion-virtual-scrollをお探しですか？

ion-virtual-scrollはv6.0.0で非推奨となり、v7.0.0で削除されました。以下で詳しく説明するVirtuosoパッケージを使用することをお勧めします。

Ionic Reactアプリで検討すべき仮想スクロールソリューションの1つは、Virtuosoです。このガイドでは、Ionic ReactアプリケーションにVirtuosoをインストールし、他のIonicコンポーネントと併用する方法について説明します。

インストール​

仮想スクローラーを設定するには、まずreact-virtuosoをインストールします。

npm install react-virtuoso

使用方法​

Virtuosoにはいくつかのコンポーネントが含まれていますが、この例ではVirtuosoコンポーネントを使用します。このコンポーネントは、IonContentコンポーネント内に追加する必要があります。

import React from 'react';
import { Virtuoso } from 'react-virtuoso';
import { IonAvatar, IonContent, IonItem, IonLabel, IonPage } from '@ionic/react';
const Home: React.FC = () => (
  <IonPage>
    <IonContent>
      <Virtuoso
        style={{ height: '100%' }}
        totalCount={100}
        itemContent={(index) => {
          return (
            <div style={{ height: '56px' }}>
              <IonItem>
                <IonAvatar slot="start">
                  <img src="https://picsum.photos/seed/picsum/40/40" />
                </IonAvatar>
                <IonLabel>{index}</IonLabel>
              </IonItem>
            </div>
          );
        }}
      />
    </IonContent>
  </IonPage>
);
export default Home;

ページにVirtuosoコンポーネントを追加した後、仮想スクロールコンテナのサイズを定義する必要があります。この場合、コンテナが画面の全高を占めるようにするには、style={{ height: '100%' }}を追加します。

次に、レンダリングするアイテムの総数をtotalCountプロパティで定義します。

そこから、`itemContent`プロパティを使用して、仮想スクロールコンテンツの各アイテムをレンダリングするために呼び出される関数を渡すことができます。

ここで重要なのは、`IonItem`コンポーネントをラップする`div`です。Ionicコンポーネントを遅延読み込みする場合、コンポーネントは読み込まれているがスタイルが読み込まれていないフレームがいくつかある場合があります。これが発生すると、コンポーネントの寸法は`0`になり、Virtuosoはエラーをスローする可能性があります。これは、Virtuosoがレンダリングする各アイテムに明確な位置を必要とするため、コンポーネントの寸法が`0`の場合、それを決定できないためです。

Ionicコンポーネントと併用する場合​

Ionic Frameworkでは、折りたたみ可能なラージタイトル、ion-infinite-scroll、ion-refresher、ion-reorder-groupなどの機能をion-content内で使用する必要があります。これらのエクスペリエンスを仮想スクロールで使用するには、仮想スクロールビューポートに.ion-content-scroll-hostクラスを追加する必要があります。

例えば

<IonPage>
  <IonContent scrollY={false}>
    <Virtuoso className="ion-content-scroll-host">{/* Your existing content and configurations */}</Virtuoso>
  </IonContent>
</IonPage>

参考資料​

このガイドでは、Virtuosoの機能のごく一部しか説明していません。詳細については、Virtuosoのドキュメントを参照してください。

目次

このページを編集