How to handle infinite scroll with segments ionic

Ionic Framework ionic-v3
1

how to handle infinite scroll with segments ionic2

2

Segments manage infinite scroll by default, there is nothing specific to do or code.
However, if you’re planning to load a lot of data in segments, I suggest you to at least use LoadingController. You can also paginate it with custom queries.

But, it is not exactly the best way/component to use it if you have really huge lists of data to load.

3

@FrancoisIonic Hi, I am also having a problem with infiniteScroll and segments… when one of the segments reaching the end , where infiniteScroll.enable(false) . Switching to another segment then, the infiniteScroll is not enabled at all… even if I put the boolean value in a variable and initialize it at constructor level.

.ts:

 doInfinite(infiniteScroll){
   if (this.segment === 'all'){
     this.doInfiniteForSegmentAll(infiniteScroll);
   } else
   if (this.segment === 'featured'){
     this.doInfiniteForSegmentFeatured(infiniteScroll);
   }
 }

 doInfiniteForSegmentAll(infiniteScroll){
    this.service.getData().subscribe(res => {
       if (res.length > 0){
         //Do stuff
       } else {
         infiniteScroll.enable(false)
         //show a toast
      }
  });
 }

  doInfiniteForSegmentFeatured(infiniteScroll){
     this.service.getData().subscribe(res => {
       if (res.length > 0){
         //Do stuff
       } else {
         infiniteScroll.enable(false)
         //show a toast
      }
    });
  }

.html:

 <ion-infinite-scroll *ngIf="segment === 'all' || segment === 'featured'" (ionInfinite)="doInfinite($event)" threshold="50px">
    <ion-infinite-scroll-content
      loadingText="Loading" loadingSpinner="dots"></ion-infinite-scroll-content>
 </ion-infinite-scroll>
4

@yasirpanjsheri Hi, this is custom code, and it looks really nice coded. However, I fear this can conflict with native code for segments (as for Ionic 2). To help you, I think you should try to inject this as a provider in your project, and give priority to this (I think it’s possible through project files like app.component.ts).

Feel free to answer if that helped you a bit.

5

I found a way to make this work. Infinite scroll only works inside an ion-content, not within segments. To make it work, you need to wrap the content of your ion-segment-content inside an ion-content.

<ion-segment-view>
<ion-segment-content>
<ion-content>
<ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
</ion-segment-content>
</ion-segment-view>