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>
virtual-scroll-element
はコンテンツのスクロールを担当するスクロールコンテナを指します。これは使用している仮想スクロールソリューションが直接提供するコンポーネントかもしれません。
Accessibility
開発者は、ユーザーがスクロールすると追加されたり削除されたりするスクロール可能なリストアイテムに 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 | If true , the infinite scroll will be hidden and scroll event listeners will be removed.Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed. |
Attribute | disabled |
Type | boolean |
Default | false |
position
Description | The position of the infinite scroll element. The value can be either top or bottom . |
Attribute | position |
Type | "bottom" | "top" |
Default | 'bottom' |
threshold
Description | The threshold distance from the bottom of the content to call the infinite output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of 10% for the infinite output event to get called when the user has scrolled 10% from the bottom of the page. Use the value 100px when the scroll is within 100 pixels from the bottom of the page. |
Attribute | threshold |
Type | string |
Default | '15%' |
イベント
Name | Description | Bubbles |
---|---|---|
ionInfinite | Emitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's complete() method when your async operation has completed. | true |
メソッド
complete
Description | Call complete() within the ionInfinite output event handler when your async operation has completed. For example, the loading state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request to add more items to a data list. Once the data has been received and UI updated, you then call this method to signify that the loading has completed. This method will change the infinite scroll's state from loading to enabled . |
Signature | complete() => 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.