Ионный бесконечный свиток не работает внутри ионного свитка

Question

Я пытаюсь реализовать загрузку большей функциональности в половину части страницы. Поэтому я поместил этот код в ion-scroll, но текущая реализация почему-то не работает, если метод

(ionInfinite)="doInfinite($event)"

не запускается и пользовательский интерфейс загрузчика не отображается. Тем не менее, та же реализация работает, если контент размещен в ионном контенте вместо ионной прокрутки.

<ion-content padding>
<ion-scroll scrollY="true" id="accountList" class="list-box">
        <ion-list >
          <ion-item *ngFor="let item of [1,2,3,4,5,6,7,8,9]">
            <ion-icon ios="ios-add-circle" md="ios-add-circle" item-start color="secondary"></ion-icon>
              Item1
            <ion-buttons item-end>
                  <button ion-button clear icon-only color="orange">
                     <ion-icon ios="md-create" md="md-create" item-end ></ion-icon>
                  </button>
                  <button ion-button clear icon-only color="danger">
                     <ion-icon ios="md-close" md="md-close" item-end></ion-icon>
                  </button>
            </ion-buttons>
          </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-scroll>
</ion-content>

Answer 1

Извините за мой плохой английский, но я решил эту проблему, используя следующий код:

<ion-scroll #scrollWeb scrollY="true" class="scroll-y">
    <ion-grid>
        <ion-row>
            <ion-col col-4 col-sm-6 col-md-4 col-lg-4 col-xl-4 *ngFor="let item of items">
                <item-card [item]="item"></item-card>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-scroll>

И по моему компоненту:

@ViewChild('scrollWeb') scrollWeb: Scroll;

Добавлен слушатель на DOM Элемент, чтобы обнаружить, прибыл ли свиток в конце, следующим образом:

ngAfterViewInit() {   
    if (this.scrollWeb) {
        this.scrollWeb.addScrollEventListener((ev) => {
            if ((ev.target.offsetHeight + ev.target.scrollTop) >= ev.target.scrollHeight) {
                this.doInfinite(null);
            }
        });
    }
}

В функции doInfinite вы можете опустить или показать загрузчик следующим образом:

if (infiniteScroll !== null) {
     infiniteScroll.complete(); 
}

Answer 2

Ионная версия: 3.9.2
У меня похожая проблема в компоненте. Мое решение было:

1. замещать <ion-scroll> с <ion-content>
2. добавлять overflow: auto; стиль для <ion-content>
3. Наслаждайтесь виртуальной прокруткой

Answer 3

Вам нужно вызвать метод $event.complete(). Со страницы документации Ionic InifniteScroll:

"Выражение, назначенное бесконечному событию, вызывается, когда пользователь выполняет прокрутку на указанное расстояние. Когда это выражение завершает свои задачи, оно должно вызвать метод complete () для экземпляра бесконечной прокрутки".

Answer 4

ion-Scroll не запускает события прокрутки прямо сейчас, поэтому подписка ion-infinite-scroll на события прокрутки не запускается. Вы можете попытаться найти обходные пути, такие как запуск подобного события самостоятельно. Я просто решил подражать визуальному сходству в обычном ионном контенте, используя css (пока не идеальное решение).

Ссылка на выпуск на Ionic Github: https://github.com/ionic-team/ionic/issues/13904 Ссылка на выпуск на форуме: https://forum.ionicframework.com/t/ionscroll-event-doesnt-fire-on-ion-scroll/96188/3