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/