Skip to main content
Version: v7

ion-infinite-scroll

Infinite Scrollコンポーネントは、ユーザーがページの下部または上部から指定された距離をスクロールしたときに実行されるアクションを呼び出します。

ユーザが定義された距離に達したときに、ionInfinite イベントに割り当てられた関数が呼び出されます。この関数がすべてのタスクを完了したら、無限スクロールインスタンスに対して complete() メソッドを呼び出す必要があります。

無限スクロールのコンテンツ

ion-infinite-scrollコンポーネントは、無限スクロールのロジックを持っています。コンテンツを表示するには、子コンポーネントが必要です。Ionicは、デフォルトでその ion-infinite-scroll-content コンポーネントを使用します。このコンポーネントは、無限スクロールを表示し、無限スクロールの状態に応じて外観を変更します。ユーザが使用しているプラットフォームに応じて最適なスピナーが表示されます。ただし、ion-infinite-scroll-content コンポーネントのプロパティを設定することにより、デフォルトのスピナーを変更したり、テキストを追加することができます。

Custom Content

ion-infinite-scroll と ion-infinite-scroll-content コンポーネントを分離することで、開発者は必要に応じて独自のコンテンツコンポーネントを作成できます。このコンテンツには、SVG要素から固有のCSSアニメーションを持つ要素まで、あらゆるものを含めることができます。

Virtual Scrollの使い方

無限スクロールを機能させるには、スクロールコンテナが必要です。仮想スクロールを使用する場合は、ion-contentのスクロールを無効にし、.ion-content-scroll-hostクラスのターゲットで、どの要素コンテナがスクロールコンテナを担当するのかを指定する必要があります。

<ion-content scroll-y="false">
  <virtual-scroll-element class="ion-content-scroll-host">
    <!-- Your virtual scroll content -->
  </virtual-scroll-element>
  <ion-infinite-scroll>
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

アクセシビリティ

開発者は、ユーザーがスクロールすると追加されたり削除されたりするスクロール可能なリストアイテムに role="feed" 属性を割り当てる必要があります。

個々のリストアイテムは role="article" を持つか、<article> 要素を直接使用しなければならない。

例えば、ion-listでアイテムのコレクションをレンダリングする場合。

<ion-content role="feed">
  <ion-list>
    <ion-item role="article">
      First item
    </ion-item>
    <ion-item role="article">
      Second item
    </ion-item>
    ...
  </ion-list>

  <ion-infinite-scroll>
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

その他の情報については、ARIA: feed role のドキュメントを参照してください。

Interfaces

InfiniteScrollCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

interface InfiniteScrollCustomEvent extends CustomEvent {
  target: HTMLIonInfiniteScrollElement;
}

プロパティ

disabled

Descriptiontrueの場合、無限スクロールは非表示になり、スクロールイベントリスナーが削除されます。 true を設定すると、無限スクロールがスクロール中に新しいデータを積極的に受け取ろうとするのを無効にすることができます。これは、追加できるデータがもうないことが分かっていて、無限スクロールが不要になった場合に有効です。
Attributedisabled
Typeboolean
Defaultfalse

position

Description無限スクロール要素の位置を指定します。値は top または bottom のどちらかです。
Attributeposition
Type"bottom" ｜ "top"
Default'bottom'

threshold

Descriptionスクロールしたときに infinite 出力イベントを呼び出すための、コンテンツの底からの閾値の距離。閾値はパーセントかピクセル単位で指定します。例えば、10%という値を使用すると、ユーザがページの下から10%スクロールしたときに infinite 出力イベントが呼び出されるようになります。また、ページの下から100ピクセル以内にスクロールした場合には、100pxという値を使用します。
Attributethreshold
Typestring
Default'15%'

イベント

NameDescription
ionInfiniteスクロールが閾値の距離に達したときに発行されます。非同期処理が完了したら、無限ハンドラから無限スクロールの complete() メソッドを呼び出す必要があります。

メソッド

complete

Description非同期操作が完了したら、ionInfinite出力イベントハンドラ内で complete() を呼び出します。例えば、AJAX リクエストからデータを受信してデータリストに項目を追加するなど、アプリが非同期処理を実行している間が loading 状態です。データの受信とUIの更新が完了したら、このメソッドを呼び出してロードが完了したことを知らせます。このメソッドは、無限スクロールの状態を loading から enabled へと変更します。
Signaturecomplete() => Promise<void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.

Contents

Edit this page