Ion-infinite-scroll not working

Ionic Framework ionic-v3
1

Hi All,

I cannot seem to get ion-infinite-scroll to fire. Any ideas what I am doing incorrectly?

Thanks

html

<ion-header>
  <ion-navbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Search</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="search" id="search-content">

  <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" placeholder="Search">
      </label>

  <ion-list [virtualScroll]="employeeModels">
    <ion-item-sliding *virtualItem="let item">
      <ion-item>
        {{ formatEmployee(item) }}
        <ion-avatar item-left><img [src]="item.avatar64 ? item.avatar64 : 'images/blank-profile-picture.png'"></ion-avatar>
        <h2>{{item.firstName}}</h2>
        <p>{{item.categories[0].name}}&nbsp;{{item.subCategories[0].name}}&nbsp;{{item.time}}</p>
      </ion-item>

      <ion-item-options>
        <button primary (click)="alert('todo')"><ion-icon name="text"></ion-icon>Message</button>
        <button light (click)="alert('todo')"><ion-icon class="ion-ios-heart"></ion-icon>Favourite</button>
      </ion-item-options>

    </ion-item-sliding>
  </ion-list>

  <ion-infinite-scroll on-infinite="loadMoreData()" distance="1%">
  </ion-infinite-scroll>

  <!--<ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMoreData()">
  </ion-infinite-scroll>-->

</ion-content>

ts

  loadMoreData() {
    console.log('loadMoreData');
  }

  moreDataCanBeLoaded() {
    console.log('moreDataCanBeLoaded');
  }
1 Like
2

I also try the following, it does show the spinner at the bottom of the page, but does not call the function.

Any ideas please?

html

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

ts

  doInfinite(infiniteScroll:any) {
     console.log('doInfinite, start is currently ');
  }
3

SOLVED

he directive now uses (ionInfinite) instead of (infinite)

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

2 Likes
4

I had this issue in Ionic 3, even using correct ionInfinite directive. Everything was set correctly, according to documentation. And the same setup was working on one page while not on the other.
I found the difference between the 2 pages was that on the working one I referenced ionic Content component with a @ViewChild decorator and called its resize() method.

So I added it to the second page and it started working! I don’t know what kind of magic this is, but in case someone is in the same trouble, try this:

  import { Content } from 'ionic-angular';
  // ...
  // within the page class properties
  @ViewChild(Content) content: Content;
  // ...
  ngOnInit() {
    this.content.resize();
  }