CODEWITHSUNDEEP
htmlionic3ion-scrollion-infinite-scroll
Mantu Nigam
Mantu Nigam

Reputation: 4030

ion-infinite-scroll not working inside ion-scroll

I'm trying to implement load more functionality in the half portion of the page. So I put that code inside the ion-scroll but somehow current implementation is not working i.g. the method is 

(ionInfinite)="doInfinite($event)"

is not triggered and loader UI is not rendered. However, the same implementation is working if the content placed in ion-content instead of ion-scroll.

<ion-content padding>
<ion-scroll scrollY="true" id="accountList" class="list-box">
        <ion-list >
          <ion-item *ngFor="let item of [1,2,3,4,5,6,7,8,9]">
            <ion-icon ios="ios-add-circle" md="ios-add-circle" item-start color="secondary"></ion-icon>
              Item1
            <ion-buttons item-end>
                  <button ion-button clear icon-only color="orange">
                     <ion-icon ios="md-create" md="md-create" item-end ></ion-icon>
                  </button>
                  <button ion-button clear icon-only color="danger">
                     <ion-icon ios="md-close" md="md-close" item-end></ion-icon>
                  </button>
            </ion-buttons>
          </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-scroll>
</ion-content>

Upvotes: 1

Views: 4104

Answers (4)

Alexander
Alexander

Reputation: 294

Ionic-version: 3.9.2
I have a similar problem in the component. My solution was:

  1. Replace <ion-scroll> with <ion-content>
  2. Add overflow: auto; style for <ion-content>
  3. Enjoy virtual scrolling

Upvotes: 4

Vinicius Carvalho
Vinicius Carvalho

Reputation: 323

Sorry for my bad english, but I resolved this problem by using below code:

<ion-scroll #scrollWeb scrollY="true" class="scroll-y">
    <ion-grid>
        <ion-row>
            <ion-col col-4 col-sm-6 col-md-4 col-lg-4 col-xl-4 *ngFor="let item of items">
                <item-card [item]="item"></item-card>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-scroll>

And on my component:

@ViewChild('scrollWeb') scrollWeb: Scroll;

Added listener on DOM Element to discover if the scroll arrived in the end as follows:

ngAfterViewInit() {   
    if (this.scrollWeb) {
        this.scrollWeb.addScrollEventListener((ev) => {
            if ((ev.target.offsetHeight + ev.target.scrollTop) >= ev.target.scrollHeight) {
                this.doInfinite(null);
            }
        });
    }
}

In doInfinite function you can omit or show a loader as follows:

if (infiniteScroll !== null) {
     infiniteScroll.complete(); 
}

Upvotes: 4

user3403124
user3403124

Reputation: 11

You need call the $event.complete() method. From the Ionic documentation page of InifniteScroll:

"The expression assigned to the infinite event is called when the user scrolls to the specified distance. When this expression has finished its tasks, it should call the complete() method on the infinite scroll instance."

Upvotes: 1

Pavel Glebov
Pavel Glebov

Reputation: 31

ion-Scroll doesn't fire scroll events right now, thus ion-infinite-scroll subscription to scroll events is not fired. You can try to find some workarounds like firing similar event yourself. I just desided to emulate visual similarity in regular ion-content using css for now (not perfect solution).

Link to issue on Ionic Github: https://github.com/ionic-team/ionic/issues/13904 Link to issue on forum: https://forum.ionicframework.com/t/ionscroll-event-doesnt-fire-on-ion-scroll/96188/3

Upvotes: 0

Related Questions