ion-list内のイオン無限スクロール

Question

ionic 3アプリケーションでion-infinite-scrollを実装しようとしています。私はそれをイオンリストの中に実装する必要があります。私はスクロールコンテンツをオーバーフローさせました：隠して、イオンリストをオーバーフローさせます-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 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/