I want to do infinite scroll

Ionic Framework ionic-v3
1

program execute properly but page are not loading

Below my .ts

private url: string = mydomain/quotes/wp-json/wp/v2/posts';
	items: any;
	page: any;
		 
  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, public popoverCtrl: PopoverController, private socialSharing: SocialSharing) {}
  
ionViewDidEnter() {

  this.page = '1';

  this.loadPosts( this.page ).then( data => {
   console.log('Posts loaded', data);
   this.items = data;
  });
 }

 loadPosts( page ) {

  if( !page ) {
       let page = '1';
     }

  return new Promise(resolve => {

   this.http.get( this.url + '?page=' + page )
      .map(res => res.json())
      .subscribe(data => {
        // we've got back the raw data, now generate the core schedule data
        // and save the data for later reference
        resolve( data );
      });

  });
 }
 loadMore(infiniteScroll) {

     this.page++;

     this.loadPosts( this.page ).then( items => {
       // Loads posts from WordPress API
       let length = items["length"];

       if( length === 0 ) {
         infiniteScroll.complete();
         return;
       }

       for (var i = length - 1; i >= 0; i--) {
         this.items.push( items[i] );
       }

   
   infiniteScroll.enable(false);
   
     });
 }

Below HTML


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

Please help me anyone.

1 Like