Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

InfiniteScroll

ion-infinite-scroll

Improve this doc

The Infinite Scroll allows you to perform an action when the user scrolls a specified distance from the bottom or top of the page.

The expression assigned to the infinite event is called when the user scrolls to the specified distance. When this expression has finished its tasks, it should call the complete() method on the infinite scroll instance.

Usage

<ion-content>

 <ion-list>
   <ion-item *ngFor="let i of items">{{i}}</ion-item>
 </ion-list>

 <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>

</ion-content>
@Component({...})
export class NewsFeedPage {
  items = [];

  constructor() {
    for (let i = 0; i < 30; i++) {
      this.items.push( this.items.length );
    }
  }

  doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
      for (let i = 0; i < 30; i++) {
        this.items.push( this.items.length );
      }

      console.log('Async operation has ended');
      infiniteScroll.complete();
    }, 500);
  }

}

waitFor method of InfiniteScroll

In case if your async operation returns promise you can utilize waitFor method inside your template.

<ion-content>

 <ion-list>
   <ion-item *ngFor="let item of items"></ion-item>
 </ion-list>

 <ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>

</ion-content>
@Component({...})
export class NewsFeedPage {
  items = [];

  constructor() {
    for (var i = 0; i < 30; i++) {
      this.items.push( this.items.length );
    }
  }

  doInfinite(): Promise<any> {
    console.log('Begin async operation');

    return new Promise((resolve) => {
      setTimeout(() => {
        for (var i = 0; i < 30; i++) {
          this.items.push( this.items.length );
        }

        console.log('Async operation has ended');
        resolve();
      }, 500);
    })
  }
}

Infinite Scroll Content

By default, Ionic uses the infinite scroll spinner that looks best for the platform the user is on. However, you can change the default spinner or add text by adding properties to the ion-infinite-scroll-content component.

<ion-content>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>

Further Customizing Infinite Scroll Content

The ion-infinite-scroll component holds the infinite scroll logic. It requires a child component in order to display the content. Ionic uses ion-infinite-scroll-content by default. This component displays the infinite scroll and changes the look depending on the infinite scroll's state. Separating these components allows developers to create their own infinite scroll content components. You could replace our default content with custom SVG or CSS animations.

Instance Members

complete()

Call complete() within the infinite 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.

enable(shouldEnable)

Call enable(false) to disable the infinite scroll from actively trying to receive new data while scrolling. This method is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.

Param Type Details
shouldEnable boolean

If the infinite scroll should be enabled or not. Setting to false will remove scroll event listeners and hide the display.

waitFor()

Pass a promise inside waitFor() within the infinite output event handler in order to change state of infiniteScroll to “complete”

Input Properties

Attr Type Details
enabled boolean

If true, Whether or not the infinite scroll should be enabled or not. Setting to false will remove scroll event listeners and hide the display.

position string

The position of the infinite scroll element. The value can be either top or bottom. Default is bottom.

threshold string

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. Default is 15%.

Output Events

Attr Details
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.

Sass Variables

All

Property Default Description
$infinite-scroll-loading-margin 0 0 32px 0

Margin of the infinite scroll loading icon

$infinite-scroll-loading-color #666

Color of the infinite scroll loading indicator

$infinite-scroll-loading-text-color $infinite-scroll-loading-color

Text color of the infinite scroll loading indicator

$infinite-scroll-loading-text-margin 4px 32px 0 32px

Margin of the infinite scroll loading text

API

Native

General