Is InfiniteScroll not working on ionic 3?

Question

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">{{ item?.nome }}</h2>
        <p>Rua: {{ item?.rua }} - {{ item?.numero }}</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.

This is a vídeo of my aplicattion

Answer 1

You are doing this.items.push( this.items.length ); which means the the length of the items is being pushed into the items[].

Try pushing the object itself and it would work.

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

NOTE: You should define the start and end variables so that you won't be ended up displaying the same item again and again.

Answer 2

From your question & the comments I believe the effect you want to achieve, is the list loading the next set of list items before the user reaches the end of the list. As of right now, the doInfinite($event) event is triggered only after the user has scrolled to the end of the list. You will want to trigger this event a little before the end.

To do that, add the attribute threshold to the html. Threshold defines the point at which doInfinite($event) should be triggered. For example, if the threshold value is 25%, the event will be triggered when the user is 25% from the end of the list aka once 75% of the list has been scrolled through.

The html will now look like :

<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">{{ item?.nome }}</h2>
      <p>Rua: {{ item?.rua }} - {{ item?.numero }}</p>
    </ion-item>
  </ion-list>

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

From Ionic's documentation

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%.

Answer 3

your ion-list needs to be wrapped by a ion-content, otherwise you'll get an error:

ERROR Error: StaticInjectorError(AppModule)[InfiniteScroll -> Content]: StaticInjectorError(Platform: core)[InfiniteScroll -> Content]: NullInjectorError: No provider for Content!

<div paddign>
  <ion-searchbar (ionInput)="getItems($event)" placeholder="Pesquisar"></ion-searchbar>
    <ion-content>
      <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">{{ item?.nome }}</h2>
          <p>Rua: {{ item?.rua }} - {{ item?.numero }}</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>
    </ion-content>
</div>

Check the live example

---

Settings

If your question is about seeing the "loading" text, check out the settings for infinite scroll:

Loading new elements on the top

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

Use this if you want your app to add items to the top.

Loading earlier

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%.

Use this if you want it to load extra items earlier so you don't see the "loading" text.