CODEWITHSUNDEEP
angularionic-frameworkionic4infinite-scroll
Moblize IT
Moblize IT

Reputation: 1328

ionic 4 infinite scroll works only once

I have seen other posts with this issue but does not seems to indicate what's the issue in my case. i dont see any errors on console etc. and behavior is same on browser as well phone.

the code is below. it does work as expected first time and loads another 5 objects. but then i don't see it getting fired again

<ion-content fullscreen>
    <div  class="full-screen-bg">

            <div style="background-color: #181828;padding:10px">
                <ion-row *ngFor="let gal of core.gallery; let i=index">

                            <ion-col *ngIf="i%2 == 0 && core.gallery[i] != undefined" class="ion-text-center ion-padding" style="padding-top:0px !important">
                                <img *ngIf="core.gallery[i].type == 'image'" src="{{core.gallery[i].link}}" (click)="zoomImage(i)">
                                <iframe *ngIf="core.gallery[i].type == 'video'" style="width: 100%" [src]="getVideoUrl(core.gallery[i].link)" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </ion-col>
                            <ion-col *ngIf="i%2 == 0 && core.gallery[i+1] != undefined"  style="padding-left:0px !important;padding-top:0px !important" class="ion-text-center ion-padding">
                                <img *ngIf="core.gallery[i+1].type == 'image'"  src="{{core.gallery[i+1].link}}"  (click)="zoomImage(i+1)">
                                <iframe *ngIf="core.gallery[i+1].type == 'video'" style="width: 100%" [src]="getVideoUrl(core.gallery[i+1].link)" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </ion-col>

                </ion-row>
            </div>
    </div>

    <ion-infinite-scroll #infiniteScroll (ionInfinite)="loadData($event)">
        <ion-infinite-scroll-content
          loadingSpinner="bubbles"
          loadingText="Loading more data...">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>

for .ts

import { IonInfiniteScroll } from '@ionic/angular';

....
   @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

 loadData(event) {
    setTimeout(async() => {

      let resp =  await this.sgSvc.getGalleryPaged(this.anchorKey)
      console.log("new anchor key:" + JSON.stringify(resp[0].key))
      this.anchorKey = resp[0].key
      var galleryKeys = Object.keys(resp)

      for(let galleryKey of galleryKeys){
        var galleryObj = resp[galleryKey]
        //console.log(galleryObj._name + " " + galleryObj._link)

        if(this.showPhotos == false && galleryObj._type == 'image')
          continue

        if(this.showVideos == false && galleryObj._type == 'video')
          continue 

        var glry:Gallery = new Gallery(galleryKey, galleryObj._name, galleryObj._type, galleryObj._link, galleryObj._date, galleryObj._desc)
        this.core.gallery.push(glry)
      }

      console.log('Done');
      event.target.complete();
    }, 500);
  }

Upvotes: 3

Views: 3931

Answers (2)

Mohammed
Mohammed

Reputation: 1022

I faced the same issue due to a typo, i had forgotten to add paranthesis after event.target.complete

    event.target.complete

instead

    event.target.complete()

Upvotes: 0

Pravin
Pravin

Reputation: 820

Same issue was happening with one page I had developed.
I was having below style in scss for that same component, after commenting "overflow-y: scroll;"
It started working well. It is just weird. It took me 3 hours to figure out :)

ion-grid,
ion-row {
  height: 100%;
  overflow-y: scroll;
}

Upvotes: 1

Related Questions