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

Question

Я пытаюсь внедрить ion-infinite-scroll в мое приложение ionic 3. Мне нужно реализовать это в списке ионов. я сделал переполнение содержимого прокрутки: скрытым и переполнение списка ионов-y: прокрутка.

Мой HTML-код:

<ion-content fullscreen padding>
<ion-list>
    <ion-item *ngFor="let passanger of passangers" (click) = "gotoPassangerDetails(passanger.bookingNo)">
        <div class = "row">
            <div class = "col">{{passanger.lastName}}</div>
            <div class = "col">{{passanger.firstName}}</div>
        </div>
    </ion-item>
    <ion-infinite-scroll style="background-color: white" (ionInfinite)="doInfinite($event)" infinite-scroll-parent="true">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..." position="top" ></ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-list>

Мой CSS

page-customer-list {
.scroll-content {;
    height: -webkit-fill-available;
    overflow: hidden;
}

ion-content{
    .row{
        .col.center{
            text-align: center;
        }
        font-size: 14px;
    }

    ion-list{
        overflow-y: scroll;
        height: 75%;
    }
}}

Я не могу получить триггер на doInfinite. если я удаляю переполнение: скрытый в прокрутке - содержание это работает. но вся моя страница прокручивается. Мне нужно прокручивать только содержимое внутри ионного списка.

Answer 1

Оберните свой список ионов с помощью ion-scroll, если вы хотите, чтобы ваш список был прокручиваться. Чтобы сделать прокрутку списка вертикально, оберните его внутри: -

<ion-scroll scrollY="true">
</ion-scroll>

Проверьте ссылку ниже для получения дополнительной информации: -

https://ionicframework.com/docs/api/components/scroll/Scroll/

Изменить: - Попробуйте код ниже

<ion-content padding>
<ion-scroll scrollY="true">
  <ion-list>
    <ion-item *ngFor="let passanger of passangers" (click)="gotoPassangerDetails(passanger.bookingNo)">
      <div class="row">
        <div class="col">{{passanger.lastName}}</div>
        <div class="col">{{passanger.firstName}}</div>
      </div>
    </ion-item>
  </ion-list>

  <ion-infinite-scroll style="background-color: white" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..." position="top"></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-scroll>
</ion-content>

Также удалите весь код из вашего CSS. Это необязательно.

Проверьте ссылку ниже для официального образца бесконечной прокрутки: -

https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/