Saturday, 10 November 2018

Is InfiniteScroll not working on ionic 3?

I'm having trouble implementing Infinite-scroll in my IONIC 3 application

This is my home.html:

<div paddign>
  <ion-searchbar (ionInput)="getItems($event)" placeholder="Pesquisar"></ion-searchbar>
    <ion-list>
      <ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
        <ion-thumbnail item-left>
            <img [src]="item.imagem">
        </ion-thumbnail>
        <h2 style="color:#886AEA"></h2>
        <p>Rua:  - </p>
      </ion-item>
    </ion-list>

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

And this is my home.ts:

items: any[];

constructor(private afAuth: AngularFireAuth, private toast: ToastController,
    public navCtrl: NavController, public navParams: NavParams, public menu: MenuController) {
    this.initializeItems();
}

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);
}

However this function works only at the end of my application.

enter image description here



from Is InfiniteScroll not working on ionic 3?

No comments:

Post a Comment