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

仮想スクロール

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

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

インストール​

CDK Scroller を設定するには、まず @angular/cdk をインストールします。

npm add @angular/cdk

これはさまざまなユーティリティのコレクションを提供しますが、ここでは ScrollingModule に焦点を当てます。

CDK Scroller を使用する場合は、コンポーネントにモジュールをインポートする必要があります。たとえば、タブスタータープロジェクトでは、tabs1.module.ts ファイルにインポートを追加できます。

  import { IonicModule } from '@ionic/angular';
  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { Tab1Page } from './tab1.page';
  import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+ import { ScrollingModule } from '@angular/cdk/scrolling';
  import { Tab1PageRoutingModule } from './tab1-routing.module';
  @NgModule({
    imports: [
      IonicModule,
      CommonModule,
      FormsModule,
      ExploreContainerComponentModule,
      Tab1PageRoutingModule,
+     ScrollingModule
    ],
    declarations: [Tab1Page]
  })
  export class Tab1PageModule {}

これらを追加すると、Tab1Page コンポーネントで Virtual Scroller にアクセスできるようになります。

使用法​

CDK Virtual Scroller は、コンポーネントのテンプレートに cdk-virtual-scroll-viewport を追加することで、コンポーネントに追加できます。

<ion-content>
  <cdk-virtual-scroll-viewport> </cdk-virtual-scroll-viewport>
</ion-content>

cdk-virtual-scroll-viewport はスクロール可能なコンテンツのルートとなり、ビューからスクロールアウトする際に DOM ノードをリサイクルする役割を担います。

この時点での DOM ノードは、アプリに必要な任意のコンテンツにすることができます。違いは、コレクションを反復処理する場合、*ngFor の代わりに *cdkVirtualFor が使用されることです。

<ion-content>
  <cdk-virtual-scroll-viewport>
    <ion-list>
      <ion-item *cdkVirtualFor="let item of items">
        <ion-avatar slot="start">
          <img src="https://loremflickr.com/40/40" />
        </ion-avatar>
        <ion-label> {{item }} </ion-label>
      </ion-item>
    </ion-list>
  </cdk-virtual-scroll-viewport>
</ion-content>

ここで、items は配列ですが、配列、Observable<Array>、または DataSource にすることができます。DataSource は、必要なデータとユーティリティメソッドを提供できる抽象クラスです。詳細については、CDK Virtual Scrolling ドキュメントをご覧ください。

cdk-virtual-scroll-viewport は各ノードのサイズと、最小/最大バッファサイズを知る必要があるため、コンポーネントはまだ完了していません。

現時点では、CDK Virtual Scroller は固定サイズの要素のみをサポートしていますが、動的サイズの要素は将来計画されています。Tab1Page コンポーネントの場合、アイテムのみをレンダリングしているため、固定サイズにハードコードできます。

最小/最大バッファサイズは、スクローラーに「この最小高さに達するのに必要な数のノードをレンダリングするが、これを超えない」ことを指示します。

<cdk-virtual-scroll-viewport itemSize="56" minBufferPx="900" maxBufferPx="1350"></cdk-virtual-scroll-viewport>

この場合、cdk-virtual-scroll-viewport は高さ 900px に達するまで高さ 56px のセルをレンダリングしますが、1350px を超えることはありません。これらの数値は任意であるため、実際のユースケースでどの値が機能するかを必ずテストしてください。

すべてをまとめると、最終的な HTML は次のようになります。

<ion-content>
  <cdk-virtual-scroll-viewport itemSize="56" minBufferPx="900" maxBufferPx="1350">
    <ion-list>
      <ion-item *cdkVirtualFor="let item of items">
        <ion-avatar slot="start">
          <img src="https://loremflickr.com/40/40" />
        </ion-avatar>
        <ion-label> {{item }} </ion-label>
      </ion-item>
    </ion-list>
  </cdk-virtual-scroll-viewport>
</ion-content>

最後に必要なのは、ビューポートのサイズを正しく設定するための CSS です。tab1.page.scss ファイルに以下を追加します。

cdk-virtual-scroll-viewport {
  height: 100%;
  width: 100%;
}

ビューポートはさまざまなユースケースに対応するように構築されているため、デフォルトのサイズ設定は設定されておらず、開発者が設定する必要があります。

Ionic コンポーネントでの使用​

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

例：

<ion-content [scrollY]="false">
  <cdk-virtual-scroll-viewport class="ion-content-scroll-host">
    <!-- Your existing content and configurations -->
  </cdk-virtual-scroll-viewport>
</ion-content>

さらに読む​

これは、CDK Virtual Scroller ができることのほんの一部をカバーしたにすぎません。詳細については、Angular CDK Virtual Scrolling ドキュメントをご覧ください。

目次

このページを編集する