How to handle infinite scroll with segments ionic

how to handle infinite scroll with segments ionic2

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.

@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>

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