Pull to refresh

What is Pull-to-refresh

The pull-to-refresh pattern lets a user pull down on a list of data using touch in order to retrieve more data. This is usually implemented in apps where even few seconds of idle time can allow more data to pile up in a feed list, like in Instagram or Facebook.

This functionality is similar to hitting a refresh button, while still able to see already fetched data.

Difference from Infinite scroll

While Infinite scroll allows you to fetch more "older" data in your feed, pull-to-refresh allows you to fetch "newer" data in the feed, and add it to the visible feed.

Pull the list down to fetch newer data

Pull-to-refresh in Full App

The infinite scroll is located in src/app/pages/addons/refresh

To use this functionality, you put the ion-refresher at the top of ion-contentin your page

<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>

ion-refresher-content contains the elements which will show when the page is loading new content. You can put text, images or GIFs here as per your app design.

Loading new data

(ionRefresh)="doRefresh($event)" is basically an ionRefresh listener implemented, which fires on a pull-down and release event of the page. It then calls a function doRefresh (or any function you want), and you can implement the proper logic to fetch more data.

In Full App, we fetch more data from an API, with 5000ms delay

doRefresh(event) {
    if (this.loadedData.length > 10) {
      setTimeout(() => {
        this.util.presentToast('No new data available', true, 'top', 1500);
        event.target.complete();
      }, 1000)
    } else {
      this.util.getApiResponse().subscribe(data => {
        console.log(data);
        const result = data['result'];
        result.forEach(element => {
          this.loadedData.unshift(element)
        });
        console.log('Async operation has ended');
        event.target.complete();
      })
    }
  }

event.target.complete(); tells the app that loading new data is completed, and the loader can be hidden. This will require a custom logic on your end. For demo purpose, we stop fetching new data when the list item count exceeds 10.

Other Events

Name	Description
ionPull	Emitted while the user is pulling down the content and exposing the refresher.
ionRefresh	Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed.
ionStart	Emitted when the user begins to start pulling down.