ion-infinite-scroll

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

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

ローディングテキストとスピナー

`ion-infinite-scroll-content` は、無限スクロールインタラクションの視覚的な表示を担当します。 デフォルトでは、このコンポーネントは無限スクロールの状態に応じて外観を変更します。 ユーザーがいるプラットフォームに基づいて最適なスピナーが表示されます。 スピナーとローディングテキストは両方とも、 `ion-infinite-scroll-content` コンポーネントのプロパティを設定することでカスタマイズできます。

カスタムコンテンツ

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

仮想スクロールとの併用

無限スクロールにはスクロールコンテナが必要です。 仮想スクロールソリューションを使用する場合、 `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>

(アイコン省略)注記

`virtual-scroll-element` は、コンテンツのスクロールを担当するスクロールコンテナを指します。 これは、使用している仮想スクロールソリューションによって直接提供されるコンポーネントである可能性があります。

アクセシビリティ

開発者は、ユーザーのスクロールに合わせて追加または削除されるスクロール可能なアイテムリストに `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 ロール のドキュメントを参照してください。

インターフェース

InfiniteScrollCustomEvent

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

interface InfiniteScrollCustomEvent extends CustomEvent {
  target: HTMLIonInfiniteScrollElement;
}

プロパティ

disabled

説明	`true` の場合、無限スクロールは非表示になり、スクロールイベントリスナーは削除されます。 スクロール中に無限スクロールがアクティブに新しいデータを受信しようとしないようにするには、これをtrueに設定します。 これは、追加できるデータがこれ以上なく、無限スクロールが不要になった場合に便利です。
属性	disabled
タイプ	boolean
デフォルト	false

position

説明	無限スクロール要素の位置。 値は `top` または `bottom` のいずれかです。
属性	position
タイプ	"bottom" ｜ "top"
デフォルト	'bottom'

threshold

説明	スクロールしたときに `infinite` 出力イベントを呼び出すコンテンツの下部からのしきい値距離。 しきい値は、パーセントまたはピクセルで指定できます。 たとえば、 `10%` の値を使用すると、ユーザーがページの下部から10%スクロールしたときに `infinite` 出力イベントが呼び出されます。 スクロールがページの下部から100ピクセル以内にある場合は、 `100px` の値を使用します。
属性	threshold
タイプ	string
デフォルト	'15%'

イベント

名前	説明	バブル
ionInfinite	スクロールがしきい値距離に達したときに発行されます。 無限ハンドラー内から、非同期操作が完了したら、無限スクロールの `complete()` メソッドを呼び出す必要があります。	true

メソッド

complete

説明	非同期操作が完了したら、 `ionInfinite` 出力イベントハンドラー内で `complete()` を呼び出します。 たとえば、 `loading` 状態は、アプリがデータリストに lisääアイテムを追加するためのAJAXリクエストから lisääデータを受信するなど、非同期操作を実行している間です。 データが受信され、UIが更新されたら、このメソッドを呼び出して、読み込みが完了したことを示します。 このメソッドは、無限スクロールの状態を `loading` から `enabled` に変更します。
シグネチャ	complete() => Promise<void>

CSSシャドウパーツ

このコンポーネントで使用できるCSSシャドウパーツはありません。

CSSカスタムプロパティ

このコンポーネントで使用できるCSSカスタムプロパティはありません。

スロット

このコンポーネントで使用できるスロットはありません。