InfiniteScroll не работает на ionic 3?

Question

У меня проблемы с реализацией бесконечной прокрутки в моем IONIC 3 приложении

Это мой home.html:

<div paddign>
  <ion-searchbar (ionInput)="getItems($event)" placeholder="Pesquisar"></ion-searchbar>
    <ion-list>
      <ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
        <ion-thumbnail item-left>
            <img [src]="item.imagem">
        </ion-thumbnail>
        <h2 style="color:#886AEA">{{ item?.nome }}</h2>
        <p>Rua: {{ item?.rua }} - {{ item?.numero }}</p>
      </ion-item>
    </ion-list>

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

А это мой home.ts:

items: any[];

constructor(private afAuth: AngularFireAuth, private toast: ToastController,
    public navCtrl: NavController, public navParams: NavParams, public menu: MenuController) {
    this.initializeItems();
}

doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
        for (let i = 0; i < 30; i++) {
            this.items.push( this.items.length );
        }

        console.log('Async operation has ended');
        infiniteScroll.complete();
    }, 500);
}

Однако эта функция работает только в конце моего приложения.

Это видео моего заявления

Answer 1

Исходя из вашего вопроса и комментариев, я полагаю, что эффект, которого вы хотите достичь, состоит в том, чтобы список загружал следующий набор элементов списка до того, как пользователь достигнет конца списка. На данный момент, событие doInfinite($event) запускается только после того, как пользователь прокрутил до конца списка. Вам захочется вызвать это событие немного до конца.

Для этого добавьте атрибут threshold в html. Порог определяет точку, в которой должно срабатывать doInfinite($event). Например, если пороговое значение равно 25%, событие будет инициировано, когда пользователь находится на 25% от конца списка, то есть после того, как 75% списка будет прокручено.

HTML теперь будет выглядеть так:

<div paddign>
  <ion-searchbar (ionInput)="getItems($event)" placeholder="Pesquisar"></ion-searchbar>
  <ion-list>
    <ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
      <ion-thumbnail item-left>
        <img [src]="item.imagem">
      </ion-thumbnail>
      <h2 style="color:#886AEA">{{ item?.nome }}</h2>
      <p>Rua: {{ item?.rua }} - {{ item?.numero }}</p>
    </ion-item>
  </ion-list>

  <ion-infinite-scroll threshold="25%" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</div>

Из документации Ionic

Пороговое расстояние от нижней части содержимого для вызова бесконечного выходного события при прокрутке. Пороговое значение может быть либо в процентах, либо в пикселях. Например, используйте значение 10% для бесконечного выходного события, которое вызывается, когда пользователь прокручивает 10% от нижней части страницы. Используйте значение 100px, когда прокрутка находится в пределах 100 пикселей от нижней части страницы. По умолчанию 15%.

Answer 2

Вы делаете this.items.push( this.items.length );, что означает, что длина items вставляется в items[].

Попробуйте нажать сам объект, и он будет работать.

items: any[];

constructor(private afAuth: AngularFireAuth, private toast: ToastController,
    public navCtrl: NavController, public navParams: NavParams, public menu: MenuController) {
    this.initializeItems();
}

doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
        for (let i = 0; i < 30; i++) {
            this.items.push( this.items[length] );
        }

        console.log('Async operation has ended');
        infiniteScroll.complete();
    }, 500);
}

Примечание: Вы должны определить начальную и конечную переменные, чтобы в конечном итоге вы не отображали один и тот же элемент снова и снова.

Answer 3

ваш ion-list должен быть заключен в ion-content, в противном случае вы получите ошибку:

Ошибка ОШИБКИ: StaticInjectorError (AppModule) [InfiniteScroll -> Content]: StaticInjectorError (Платформа: ядро) [InfiniteScroll -> Content]: NullInjectorError: Нет провайдера для контента!

<div paddign>
  <ion-searchbar (ionInput)="getItems($event)" placeholder="Pesquisar"></ion-searchbar>
    <ion-content>
      <ion-list>
        <ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
          <ion-thumbnail item-left>
              <img [src]="item.imagem">
          </ion-thumbnail>
          <h2 style="color:#886AEA">{{ item?.nome }}</h2>
          <p>Rua: {{ item?.rua }} - {{ item?.numero }}</p>
        </ion-item>
      </ion-list>

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

Проверьте пример в реальном времени

---

Настройки

Если ваш вопрос касается просмотра текста «загрузки», проверьте настройки для бесконечной прокрутки :

Загрузка новых элементов сверху

позиция строка
Положение бесконечного элемента прокрутки. Значение может быть как верхним, так и нижним. По умолчанию нижнее.

Используйте это, если хотите, чтобы ваше приложение добавляло элементы в топ.

Загрузка ранее

Порог Строка
Пороговое расстояние от нижней части содержимого для вызова бесконечного выходного события при прокрутке. Пороговое значение может быть либо в процентах, либо в пикселях. Например, используйте значение 10% для бесконечного выходного события, которое вызывается, когда пользователь прокручивает 10% от нижней части страницы. Используйте значение 100px, когда прокрутка находится в пределах 100 пикселей от нижней части страницы. По умолчанию 15%.

Используйте это, если вы хотите, чтобы он загружал дополнительные элементы раньше, чтобы вы не видели текст «загрузки».