2017-12-29 30 views
0

페이지의 절반 부분에 더 많은 기능을로드하려고합니다. 그래서 나는 그 코드를 이온 스크롤 안에 넣었지만 어떻게 든 현재 구현은 작동하지 않습니다. 메서드가ion-scroll 내에서 ion-infinite-scroll이 작동하지 않습니다.

(ionInfinite)="doInfinite($event)" 

이 아니고 로더 UI가 렌더링되지 않습니다. 그러나 내용이 이온 스크롤 대신 이온 컨텐트에 배치되면 동일한 구현이 효과적입니다.

<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> 

답변

0

이온 스크롤은 지금 스크롤 이벤트를 발생시키지 않으므로 스크롤 이벤트에 대한 이온 무한 스크롤 구독이 실행되지 않습니다. 비슷한 이벤트를 직접 실행하는 것과 같은 몇 가지 대안을 찾으려고 할 수 있습니다. 난 그냥 지금은 (완벽한 솔루션이 아닌) CSS를 사용하여 정기적 인 이온 콘텐츠의 시각적 유사점을 에뮬레이트해야했습니다.

링크 이온 Github에서에 발급 : https://github.com/ionic-team/ionic/issues/13904 링크를 포럼에 발행 : https://forum.ionicframework.com/t/ionscroll-event-doesnt-fire-on-ion-scroll/96188/3