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

仮想スクロール

ion-virtual-scroll をお探しですか？

ion-virtual-scroll は v6.0.0 で非推奨となり、v7.0.0 で削除されました。Vue ライブラリを使用することをお勧めします。以下に、vue-virtual-scroller を使用したアプローチの概要を示します。

インストール​

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

npm install vue-virtual-scroller@next
注意

next タグを使用しないと、Vue 2 にしか互換性のないバージョンの vue-virtual-scroll が取得されます。

ここから、仮想スクローラーの CSS をアプリにインポートする必要があります。main.ts に次の行を追加します。

import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

仮想スクロールコンポーネントの登録​

パッケージのインストールと CSS のインポートが完了したので、すべての仮想スクロールコンポーネントをインポートするか、使用するコンポーネントのみをインポートするかを選択できます。このガイドでは、両方の方法を示します。

すべてのコンポーネントのインストール​

アプリで使用するためにすべての仮想スクロールコンポーネントをインストールするには、main.ts に次のインポートを追加します。

import VueVirtualScroller from 'vue-virtual-scroller';

次に、これを Vue アプリケーションにインストールする必要があります。

app.use(VueVirtualScroller);

これを行うと、すべての仮想スクロールコンポーネントがアプリで使用できるようになります。

注意

すべてのコンポーネントをインストールすると、アプリケーションバンドルに未使用の仮想スクロールコンポーネントが追加される可能性があります。ツリーシェイキングでより効果的に機能するアプローチについては、以下の特定のコンポーネントのインストールセクションを参照してください。

特定のコンポーネントのインストール​

アプリで使用するために特定の仮想スクロールコンポーネントをインストールするには、main.ts で使用するコンポーネントをインポートします。この例では、RecycleScroller コンポーネントを使用します。

import { RecycleScroller } from 'vue-virtual-scroller';

次に、コンポーネントを Vue アプリケーションに追加する必要があります。

app.component('RecycleScroller', RecycleScroller);

これを行うと、アプリで RecycleScroller コンポーネントを使用できるようになります。

使用方法​

この例では、リスト内の表示されているアイテムのみをレンダリングする RecycleScroller コンポーネントを使用します。アイテムのサイズが事前にわからない場合は、DynamicScroller などの他のコンポーネントを使用できます。

RecycleScroller コンポーネントは、ion-content コンポーネント内に追加する必要があります。

<template>
  <ion-page>
    <ion-content>
      <ion-list>
        <RecycleScroller class="scroller" :items="list" :item-size="56">
          <template #default="{ item }">
            <ion-item>
              <ion-avatar slot="start">
                <img src="https://picsum.photos/seed/picsum/40/40" />
              </ion-avatar>
              <ion-label>{{ item }}</ion-label>
            </ion-item>
          </template>
        </RecycleScroller>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

<script>
  import { defineComponent, ref } from 'vue';
  import { IonAvatar, IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';

  export default defineComponent({
    components: {
      IonAvatar,
      IonContent,
      IonItem,
      IonLabel,
      IonPage,
    },
    setup() {
      const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

      return { list };
    },
  });
</script>

RecycleScroller が動作するには、考慮すべき重要な点が 2 つあります。まず、items プロパティを介して反復処理するデータの配列を提供する必要があります。この場合、データを提供する list という配列があります。次に、item-size プロパティを介して各ノードのサイズを提供する必要があります。ノードのサイズを事前にわからない場合は、代わりに DynamicScroller コンポーネントを使用する必要があります。

テンプレートの設定が完了したので、仮想スクロールビューポートのサイズを正しく設定するための CSS を追加する必要があります。コンポーネントの style タグに、次のコードを追加します。

.scroller {
  height: 100%;
}

Ionic コンポーネントとの使用方法​

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

例：

<template>
  <ion-page>
    <ion-content :scroll-y="false">
      <RecycleScroller class="ion-content-scroll-host scroller">
        <!-- Your existing content and configurations -->
      </RecycleScroller>
    </ion-content>
  </ion-page>
</template>

参考資料​

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

目次

このページを編集