Ionic 3 infinite-scroll not working with tabs

Ionic Framework ionic-v3
1

hi, when i use infinite-scroll in ion-tab doInfinite() function not called after scrolling page.

i try all Lifecycle events but still dosent work.

how can i fixed it?
ionic version : 3.9.2

ts file:

export class PageName {
transactions: any = [];
constructor(navParams: NavParams) {
    this.userInfo = new User();
    if (navParams.get('kind') !== undefined) {
            this.kind = navParams.get('kind');
            this.loadData();
    }
}

loadData() {
    this.offset = 0;
    this.global.presentLoading({ content: 'Please wait...' });
    this.global.httpPostObservable('pageName', { limit: this.limit, offset: this.offset, kind: this.kind }, this.userInfo.token).subscribe((data) => {
        this.transactions = data.result.transactions;
        this.global.dismissLoading();
    }, (error) => {
        this.global.showError(error).then(()=>{
            this.global.dismissLoading();
        });
    });
}

doInfinite(infiniteScroll) {
    this.offset = this.offset + this.limit;
    if (!this.isFinish) {
        setTimeout(() => {
            this.global.presentLoading({ content: 'Please wait...' });
            this.global.httpPostObservable('pageName/loadmore', { limit: this.limit, offset: this.offset, kind: this.kind }, this.userInfo.token).subscribe((data) => {
                this.transactions = this.transactions.concat(data.result);
                if (data.result.length < this.limit) {
                    this.isFinish = true;
                }
            }, (error) => {
                this.global.showError(error).then(()=>{
                    this.global.dismissLoading();
                });
            });
            infiniteScroll.complete();
        }, 500);
    } else {
        infiniteScroll.complete();
    }
}
}

html page:

<ion-list class="MenuTable" no-lines>
    <ion-item *ngFor="let item of transactions;" class="trans">
        <ion-row align-items-center justify-content-between>
            <ion-col>
                #{{item.id}}
            </ion-col>
        </ion-row>
    </ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
2

Hi @mohammadjalili :wave:

Is the ion-infinite-scroll inside of an ion-content? I think that may be necessary, as I think the scroll events are handled there.

Best,
Rodrigo

3

yes , of course. when i test in other page , it’s work. but in ion-tab not working

4

I’m not sure what you mean when you say it’s not working on ion-tab :thinking: Can you share the whole HTML template?

5

Infinite scroll not calling method on scroll down

<ion-content>
    <ion-tabs>
        <ion-tab>
            <ion-list class="MenuTable" no-lines>
                <ion-item *ngFor="let item of transactions;" class="trans">
                    <ion-row align-items-center justify-content-between>
                        <ion-col>
                            #{{item.id}}
                        </ion-col>
                    </ion-row>
                </ion-item>
            </ion-list>
            <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
                <ion-infinite-scroll-content></ion-infinite-scroll-content>
            </ion-infinite-scroll>
       </ion-tab>
    </ion-tabs>
</ion-content>
6

There are a few problems with this template:

  • ion-tabs should be a root component, outside of the ion-content since you don’t want it to scroll (they should be at the same level).

  • ion-infinite-scroll is not designed to be used inside ion-tabs but in ion-content, which has its own scroll (docs)

What are you trying to achieve? Why do you need a list and an infinite scroll inside the tab bar?

7

I faced same issue my ion-tab freezed with vertical scrolling. I fixed it by changing some CSS for that component

ion-tab {
    height: 100%;
    overflow-y: scroll;
}