我正在尝试在ionic 3项目中加载更多数据。无限滚动只在第一次工作。然后,它停止工作,直到页面滚动到顶部,然后再滚动到底部。
这是我的代码:
HTML
TypeScript
这是我的代码:
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>
TypeScript
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);
}
});
}