Событие прокрутки ngx-infinite-scroll не остановит срабатывание - PullRequest
Новая
       18

Событие прокрутки ngx-infinite-scroll не остановит срабатывание

0 голосов
/ 10 октября 2019

Я реализовал бесконечную прокрутку с помощью ngx-infinite-scroll. Когда пользователь достигает нижней части прокручиваемого элемента (с фиксированной высотой), событие «прокручивается» вызовет и вызовет API для загрузки большего количества элементов в этот элемент.

Проблема заключается в том, что при отображении большего количества элементовданные, уровень прокрутки автоматически изменяется, и событие запускается снова. Я просто хочу, чтобы это событие было вручную запущено пользователем. Можно ли заблокировать уровень прокрутки, когда я загружаю больше данных? 

   <div
        class="project-feed-container"
        infiniteScroll
        [infiniteScrollDistance]="2"
        [infiniteScrollThrottle]="50"
        [alwaysCallback]="true"
        [scrollWindow]="false"
        (scrolled)="onScroll()"
    >

       <!-- *ngFor with content -->

    </div>

1 Ответ

1 голос
/ 11 октября 2019

Вот возможное решение ответа API, инициирующего новые запросы. Он основан на паре флагов, которые проверяют, может ли приложение выполнять новые запросы.

canLoad. Он контролирует, может ли приложение загружать новые элементы из API.

pendingLoad. Сохраняет действие в очереди, которое будет запущено при следующей итерации опроса. 

// NgOnInit to set a time interval to check status. Adjust timing to your need. 
ngOnInit() {
  setInterval( () => {
    this.canLoad = true;
    if ( this.pendingLoad ) {
      this.onScrollDown();
    }
  }, 2000);
}

Затем, когда сработают функции прокрутки, приложение должно проверить, разрешено ли вызывать API и добавлять новые элементы. 

onScrollDown() {
    if ( this.canLoad ) {
      this.canLoad = false;
      this.pendingLoad = false;

      // Call API here
      this.appendItems(0, apiData);
    } else {
      this.pendingLoad = true;
    }
  }

Вот ссылка StackBlitz с демонстрацией.

...