Событие бесконечной прокрутки Ionic 3 по-прежнему происходит в верхней или центральной части страницы.

Я делаю приложение в Ionic 3, и я использовал слайды ion с ионной прокруткой внутри, чтобы отобразить весь мой контент или данные от запроса API к серверу. Событие бесконечной прокрутки, которое оно выполняет для загрузки большего количества данных, работает нормально.

Но раздражающая часть - всякий раз, когда я прокручиваю вверх или по центру, особенно в верхней части прокрутки. Событие по-прежнему срабатывает, что должно происходить только тогда, когда я прокручиваю до самой нижней части scroll внутри slide

Я уже пробовал это альтернативное решение, но не могу решить свою проблему.

Вот код в моем HTML ниже.

<ion-slides #mySlider (ionSlideDidChange)="onSlideChanged($event)" *ngIf="!spinner">
<empty-list caption="No Content" *ngIf="errorShow || noPost"></empty-list>
<!--Explore-->
<ion-slide *ngIf="!preloader">
  <ion-scroll #scrollWeb scrollY="true">

   <!-- !!! Content inside here using ion-card and div !!!-->

    <ion-infinite-scroll (ionInfinite)="loadMorePost($event)">
      <ion-infinite-scroll-content
      loadingSpinner="crescent"
      ></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-scroll>
</ion-slide>

Я пытался получить значение оси Y прокрутки с помощью ViewChild как это ниже:

<!-- Defined the property to access the native element-->
@ViewChild('scrollWeb') scrollWeb: Scroll;

Родной элемент:

<ion-scroll #scrollWeb scrollY="true">

и в моем файле TS я вызвал эту функцию в моем ionViewDidEnter() ниже:

slideScrollTop() {
setTimeout(() => {
  console.log(this.scrollWeb)
  if (this.scrollWeb) {
    // Fix issue for infinite scroll of loadMorePost function based on github issues when using infinite scroll inside a slide and scroll
    this.scrollWeb.addScrollEventListener((ev) => {
      if ((ev.target.offsetHeight + ev.target.scrollTop) >= ev.target.scrollHeight) {
        this.loadMorePost(null);
      }
    });
  }

}, 1000)

}

и в моем loadMorePost() метод, который является событием, которое будет срабатывать, когда (ionInfinite) срабатывает.

loadMorePost(infiniteScroll) {
if (infiniteScroll !== null) {
console.log('Begin async operation');
  setTimeout(() => {
    // Do some async operation on API get request
  console.log('Async operation has ended');
    infiniteScroll.complete(); 
  }, 500);
}

}

Так что вызов API на сервере работает отлично. Но пользовательский интерфейс немного грязный, когда я пытаюсь прокручивать вверх и вниз. Я только хочу вызвать (ionInfinite) событие, когда я нахожусь в самой нижней части страницы, чего я не могу достичь даже с помощью ссылки на альтернативное решение выше.

Может кто-нибудь пролить свет на меня?

Заранее спасибо.

0 ответов

Другие вопросы по тегам