メインコンテンツまでスキップ
Version: v6

ion-infinite-scroll

Contents

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

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

Infinite Scroll Content

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

Custom Content

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

Interfaces

InfiniteScrollCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface InfiniteScrollCustomEvent extends CustomEvent {
target: HTMLIonInfiniteScrollElement;
}

Usage

<ion-content>
<ion-button (click)="toggleInfiniteScroll()" expand="block">
Toggle Infinite Scroll
</ion-button>

<ion-list></ion-list>

<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
import { Component, ViewChild } from '@angular/core';
import { IonInfiniteScroll } from '@ionic/angular';

@Component({
selector: 'infinite-scroll-example',
templateUrl: 'infinite-scroll-example.html',
styleUrls: ['./infinite-scroll-example.css']
})
export class InfiniteScrollExample {
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

constructor() {}

loadData(event) {
setTimeout(() => {
console.log('Done');
event.target.complete();

// App logic to determine if all data is loaded
// and disable the infinite scroll
if (data.length == 1000) {
event.target.disabled = true;
}
}, 500);
}

toggleInfiniteScroll() {
this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
}
}

Properties

disabled

DescriptionIf 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.
Attributedisabled
Typeboolean
Defaultfalse

position

DescriptionThe position of the infinite scroll element.
The value can be either top or bottom.
Attributeposition
Type"bottom" | "top"
Default'bottom'

threshold

DescriptionThe 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.
Attributethreshold
Typestring
Default'15%'

Events

NameDescription
ionInfiniteEmitted 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. |

Methods

complete

DescriptionCall 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.
Signaturecomplete() => Promise<void>
View Source