2017-09-29 5 views
0

ionic 3 프로젝트에서 더 많은 데이터를로드하려고합니다. 무한 스크롤은 처음에만 작동합니다. 그리고 페이지가 위 아래로 스크롤 될 때까지 작동을 멈 춥니 다. 여기 이온 3 무한 스크롤은 내용이 위에서 아래로 스크롤 될 때까지 작동하지 않습니다.

내 코드

HTML입니다

<ion-content> 
    <ion-scroll style="width:100%;height:100vh" scrollY="true"> 
     <ion-list *ngIf="posts.length>0"> 
      <button *ngFor="let post of posts" ion-item> 
     <ion-thumbnail item-start> 
      <img [src]="getPostImage(post)"> 
     </ion-thumbnail> 
     <h2>{{ post.title.rendered }}</h2> 
    </button> 
     </ion-list> 
     <ion-infinite-scroll (ionInfinite)="doInfinite($event)"> 
      <ion-infinite-scroll-content loadingText="Loading..."></ion-infinite-scroll-content> 
     </ion-infinite-scroll> 
    </ion-scroll> 
</ion-content> 

doInfinite(infiniteScroll) { 
    this.getCategoryPosts(infiniteScroll); 
} 

getCategoryPosts(infiniteScroll=null){ 
     this.api.getCategoryPosts({ 
     id : this.topic.id, 
     limit : this.limit, 
     page:this.page, 
     success:(posts)=>{ 
      this.zone.run(()=>{ 
      if(this.page >1){ 
       this.posts = this.posts.concat(posts); 
      }else{ 
       this.posts = posts; 
      } 
       this.page++; 
       if(infiniteScroll!=null) 
        infiniteScroll.complete(); 
      }); 

     }, 
     error:(error)=>{ 
      console.log(error); 
     } 
     }); 

    } 

답변

0

<ion-infinite-scroll> 확실히 적어도 다음과 같은 이온 성 3 버전, <ion-scroll style="width:100%;height:100vh" scrollY="true"> 내에서 잘 작동하지 않습니다 타이프 라이터 :

다음 무한 스크롤 이벤트가 트리거되기 전에 height 100vh<ion-scroll> 지역 내
$ ionic info 

cli packages: (./node_modules) 

    @ionic/cli-utils : 1.19.0 
    ionic (Ionic CLI) : 3.19.0 

local packages: 

    @ionic/app-scripts : 3.0.0 
    Cordova Platforms : android 6.2.3 ios 4.4.0 
    Ionic Framework : ionic-angular 3.9.2 

은은, ​​정상에 위쪽으로 스크롤이 필요합니다. 다른 값이 height 인 경우에도 같은 문제가 발생합니다.

가장 좋은 추측은 <ion-scroll> 영역에 필요한 높이 설정이 추가 된 무한 스크롤 항목의 콘텐츠 크기 변경과 충돌한다는 것입니다.

당신이 <ion-content> 완전히 스크롤과 함께 살고 완전히 <ion-scroll>을 제거 할 수 있습니다 무한 스크롤 threshold distance에 도달하기 위해 <ion-list>에 충분한 포스트 항목이 할 수 있습니다.

이것은 나를 위해 일한 유일한 해결책이었습니다!

0

화면의 전체 높이 (100vh)를 원하지 않으면 다른 해결책이 있습니다. <ion-scroll>의 높이를 70vh으로 설정하고 성공적인 무한 스크롤이있을 때마다 목록에 새 항목이 추가되면 요소의 높이에 4vh을 추가하십시오.

A를 따라서 :

scrollHeight += 4; 
 
document.getElementById('list-scroll').setAttribute('style', 'height:' + scrollHeight + 'vh');

그것은하지 않습니다 SE : 다음

<ion-scroll id="list-scroll" style="height: 70vh">
새로운 항목이 구성 요소에 의해로드되면 당신이 얼마나 키가 큰지에 관계가 있습니다. <ion-scroll>