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
Description | true の場合、無限スクロールは非表示になり、スクロールイベントリスナーが削除されます。 true を設定すると、無限スクロールがスクロール中に新しいデータを積極的に受け取ろうとするのを無効にすることができます。これは、追加できるデータがもうないことが分かっていて、無限スクロールが不要になった場合に有効です。 |
Attribute | disabled |
Type | boolean |
Default | false |
position
Description | 無限スクロール要素の位置を指定します。値は top または bottom のどちらかです。 |
Attribute | position |
Type | "bottom" | "top" |
Default | 'bottom' |
threshold
Description | スクロールしたときに infinite 出力イベントを呼び出すための、コンテンツの底からの閾値の距離。閾値はパーセントかピクセル単位で指定します。例えば、10% という値を使用すると、ユーザがページの下から10%スクロールしたときに infinite 出力イベントが呼び出されるようになります。また、ページの下から100ピクセル以内にスクロールした場合には、100px という値を使用します。 |
Attribute | threshold |
Type | string |
Default | '15%' |
イベント
Name | Description |
---|---|
ionInfinite | スクロールが閾値の距離に達したときに発行されます。非同期処理が完了したら、無限ハンドラから無限スクロールの complete() メソッドを呼び出す必要があります。 |