Infinite Scroll not working in Ionic 3

@ReacaoSistemas wrote:

It is working so when I go to the end of the screen, it activates the event, but it does not load.
You need to lift the screen a bit to show the list.

home.ts

import { Component } from ‘@angular/core’;
import { NavController, AlertController, LoadingController, Slide } from ‘ionic-angular’;
import * as WC from ‘woocommerce-api’;

import { ProdutoDetalhePage } from ‘./…/produto-detalhe/produto-detalhe’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

woocommerce: any;
products: any;
page: number;
maisVendidos: any;
maisVendidosLista: any;
moreProducts: any;

constructor(
public navCtrl: NavController,
public alertCtrl: AlertController,
public loadingCtrl: LoadingController) {

this.page = 2;

this.woocommerce = WC({
  url: "xxxxxxx/",
  consumerKey: "xxxxxxxxxxx",
  consumerSecret: "xxxxxxxxxxxx",
  wpAPI: true,
  version: "wc/v3"
});

this.loadMoreProducts(null);

this.woocommerce.getAsync("products?featured=true&per_page=10").then((data) => {
  this.products = JSON.parse(data.body);
  console.log(this.products);
}, (err) => {
  console.log(err)
});   

}

loadMoreProducts(event) {

if (event == null) {
  this.page = 2;
  this.moreProducts = [];
} else {
  this.page++;
}

this.woocommerce.getAsync("products?page=" + this.page).then((data) => {
  this.moreProducts = this.moreProducts.concat(JSON.parse(data.body));

  if (event != null) {
    event.complete();
  }
  if (JSON.parse(data.body).lenght < 10) {
    event.enable(false);
  }
}, (err) => {
  console.log(err)
})

}

}

home.html

<ion-list>

<ion-item *ngFor=“let produto of moreProducts” text-wrap>

<ion-thumbnail item-left>

<img [src]=“produto.images[0].src” />

</ion-thumbnail>

<h2>{{ produto.name}}</h2>

<p>

<span [innerHTML]=“produto.description.substr(0, 50) + ‘…’”></span>

<span [innerHTML]=“produto.price_html”></span>

</p>

</ion-item>

</ion-list>

<ion-infinite-scroll (ionInfinite)=“loadMoreProducts($event)”>

<ion-infinite-scroll-content></ion-infinite-scroll-content>

</ion-infinite-scroll>

Posts: 1

Participants: 1

Read full topic