ionic infinite scroll
<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;
}
}