Problem with Refresher and InfiniteScroll enabled/disabled

Ionic Framework ionic-v3
1

Hello! I have one problem with using Refresher and InfiniteScroll on the page.

How to reproduce. Scroll down many times to end of the page. Call function infiniteScroll.enable(false) to stop get new items form array. Then Scroll to top of the page and call Refresher which update items array and show first 5 items. Scroll down again to see other items. On this step doInfinite() never calls because it was disabled early.

How can I enable InfiniteScroll again after using refresher? Where can I call function infiniteScroll.enable(true)? If I understand correctly I can’t pass infiniteScroll object to Refresher function.

Page code:

<ion-content>
  <ion-refresher (ionRefresh)="getItems($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <ion-list><ion-item *ngFor="let item of items">{{item.name}}</ion-item></ion-list>

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

Code:

...
  getItems(refresher?) {
    this.start = 0;
    this.perPage = 5;
    this.fullItems = [...] // full array with all items;
    this.items = this.fullItems.slice(this.start, this.perPage);
    this.start += this.perPage;
  }

  doInfinite(infiniteScroll) {
    if (this.start > this.fullItems.length)
      infiniteScroll.enable(false);
    else {
      this.items = this.items.concat(this.fullItems.slice(this.start, this.start + this.perPage));
      this.start += this.perPage;
      infiniteScroll.complete();
    }
  }
...
2 Likes
2

Please help. I think it’s main problem with using this components.

3

Try this: Define a infiniteScroll variable, do this.infiniteScroll = infiniteScroll; in doInfinite when first used, then you can also access it in getItems and reset to true.

1 Like
4

Respect. Forgot about this. Will try tomorrow.

5

It worked for me.

I declared the variable infiniteScroll :any;
assigned the this.infiniteScroll = infiniteScroll; in loadMore function
then set this.infiniteScroll.enable(true); in function declared for doReferesh.