How to implement infiniteScroll - Ionic 2

Ionic Framework ionic-v3
1

Please help me how to implement infinitescroll:

Asynchronous data: Total items is 30, first display is 6 items

Request:

  • offset:0
  • display per scroll is 6 items
  • each scroll will add 6 more items.
      showProductsMore(){

           var params = params || {};
           params['filter[limit]'] = 6;
          /* params['filter[offset]']  
          here i don't know how*/ 

          this.woo.getData('/products', 'GET', params).subscribe(
          data => {
              this.listProducts = data;
              /* i dont know how to implement the infinitescroll here*/
          })
      }

In View:

     <ion-row class="products-grid">
        <ion-col  width-50  *ngFor="#row of listProducts" (click)="productDetails(row)">
            <div class="produc-list">
              <div class="product-image"><img src="{{row.featured_src}}"/></div>
              <div class="product-title">{{row.title}}</div>
              <div class="product-price">
                <span  [innerHTML]="row.price_html"></span>
              </div>
            </div>
        </ion-col>
        </ion-row>
        /* I stucked here */
        <ion-infinite-scroll *ngIf="showProductsMore()"   
        (infinite)="loadMoreProducts($event,pagenumber)">
        <ion-infinite-scroll-content
         loadingSpinner="bubbles"
         loadingText="Loading more data..." ></ion-infinite-scroll-content>
        </ion-infinite-scroll>
2

i think you are a little bit confused --> your showProductsMore loads more data, but does not return true oder false, if infinite-scroll should be shown. Take a look at your ngIf. There you should have a flag, if you want to load more data.

The logic to load more data should be placed in the loadMoreProducts function.

So you should check in your showProductsMore, how many items you are showing --> and if it is less than your limit (30 items) you should return true. in any other case false.

Following the documentation:

if loadMoreProducts is called --> request the next 6 items. put them on your product list and call infiniteScroll.complete();

If you want it easy --> load 30 items if your component is initialized and limit only the output in the ngFor. The loadMoreProducts will only increase the limit by 6 :wink:

3

Thank you @bengtler i figured it out. somehow my code is working.


          loadMoreSlicedProducts(infiniteScroll, slice_start){

          let data = this.asyncproducts;
          
          setTimeout(() => {
            this.slice_end = slice_start + this.woo.productPerPage();
            this.slice_start = this.slice_end;

            console.log('SLICESTART'+  this.slice_start );
            console.log('SLICEEND'+  this.slice_end );

            let loadMoreProducts = data.slice( slice_start, this.slice_end );

            //console.log(loadMoreProducts);

            this.products = this.products.concat(loadMoreProducts);

            this.addedAllProduct = this.products.length;

            infiniteScroll.complete();

          }, 1000);

      }
1 Like