当没有找到更多数据时,离子3无限滚动结束

时间:2017-07-26 19:23:31

标签: angular ionic-framework

我正在使用json数据,我想要做的是我需要在没有更多数据可用时结束无限滚动。 我该如何实现呢。 这是代码 -

    loadData(currentCount) {
    this.http.get('http://www.exapmle.com/feed.php?page=' + this.currentCount).map(res => res.json()).subscribe(data => {
        this.posts1 = data;
        let i = 0;
        for (let v in this.posts1) {
            if (i < 4) {
                this.slidesdata.push(this.posts1[v]);
            } else {
                this.posts.push(this.posts1[v]);
            }
            i++;
        }
    });
}

    doInfinite(infiniteScroll: any) {
    this.currentCount = this.currentCount + 1;
    this.http.get('http://www.exapmle.com/feed.php?page=' + this.currentCount).map(res => res.json()).subscribe(data => {
        this.newposts1 = data;
        this.newposts = this.newposts1;
        for (let i in this.newposts) {
            this.posts.push(this.newposts[i]);
        }
        infiniteScroll.complete();
    });
}

1 个答案:

答案 0 :(得分:0)

使用*ngIf

<强> HTML:

     <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
            <ion-infinite-scroll-content loadingText="Loading your leads..." *ngIf="pagingEnabled"></ion-infinite-scroll-content>
        </ion-infinite-scroll> 
<div *ngIf="!pagingEnabled"> No more data is available.</div>

<强> TS

public pagingEnabled: boolean = true;

 doInfinite(infiniteScroll: any) {
      this.currentCount = this.currentCount + 1;
      this.http.get('http://www.exapmle.com/feed.php?page=' + this.currentCount).map(res => res.json()).subscribe(data => {
          this.newposts1 = data;
          this.newposts = this.newposts1;  
          if (this.newposts.length) {
              for (let i in this.newposts) {
                  this.posts.push(this.newposts[i]);
              }
          } else {
              this.pagingEnabled = false;
          }

          infiniteScroll.complete();
      });
  }