Forward Advance Learning

Infinite Scroll

Ionic provides us with an infinite scroll component. We drag close to the bottom of a list, and an event fires.

Infinite scroll looks like this:

<ion-content>
<ion-list>
<ion-item *ngFor="let i of items">{{i}}</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="loadItems($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>

We listen for the event, get our data, and then call scroll.complete() to hide the spinner again.

@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
loadItems(scroll) {
setTimeout(() => {
scroll.complete();
}, 2000);
}
constructor() {}
}

Read more here:

http://ionicframework.com/docs/v2/api/components/infinite-scroll/InfiniteScroll/

Exercise - Infinite Monkeys

In your exercise folder, you'll find a random dice throwing service. You can use this to generate random numbers.

Pull 20 random numbers, and use them to populate an array. Output the array as a list using ng-for. Make it so that when you scroll to the bottom, we append 20 more numbers to the list, so you can keep scrolling forever.