<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

Tip:

ionInfinite是滾動(dòng)觸發(fā)的鉤子函數(shù)，實(shí)踐發(fā)現(xiàn)，該函數(shù)觸發(fā)是有一些比較“搞事情”的問題的，當(dāng)我們設(shè)置的分頁加載，每一頁的數(shù)據(jù)無法讓頁面達(dá)到滾動(dòng)，當(dāng)一頁數(shù)據(jù)很少?zèng)]法讓頁面出現(xiàn)滾動(dòng)條的時(shí)候，這時(shí)候我們嘗試去滾動(dòng)觸發(fā)這個(gè)函數(shù)是觸發(fā)不了的。

個(gè)人理解：把每次加載數(shù)據(jù)的大小設(shè)置盡量設(shè)置成大于整個(gè)屏幕顯示的數(shù)量即可，如果數(shù)據(jù)量小也要求實(shí)現(xiàn)加載功能可以創(chuàng)建指令。

原文鏈接：https://blog.csdn.net/Altaba/java/article/details/88355229，未親測，大家可以借鑒。

1、創(chuàng)建文件

ionic g directive streamer

2、編輯文件

import {Directive, EventEmitter, Host, Input, Output} from '@angular/core';
import {InfiniteScroll} from 'ionic-angular';

export type Callback = {():Promise<Array<any>>}|undefined;

@Directive({
  selector: '[streamer]',
})
export class Streamer {
  @Input() items:Array<any> = [];
  @Output() loaded = new EventEmitter<Array<any>>();
  @Output() loadStart = new EventEmitter<void>();
  @Input() set loadMore(cb:Callback) {
    if (this._loadMore === cb) {
      return;
    }

    this._loadMore = cb;
    this._loadFirst();
  }
  _loadIndex:number = 0;
  _loadMore:Callback = undefined;


  constructor(@Host() public infinite:InfiniteScroll) {
  }


  ngOnInit() {
    this.infinite.ionInfinite.subscribe(this._loadNext.bind(this));
    this._loadFirst();
  }


  _loadFirst() {
    this.items.length = 0;
    this.infinite.enable(false);
    this._loadNext(null);
  }


  _loadNext(infiniteEvent:any|null) {
    this._loadIndex++;
    const loadIndex = this._loadIndex;
    (async() => {
      try {
        if (this._loadMore !== undefined) {
          this.loadStart.emit();
          let items = await this._loadMore();

          if (loadIndex !== this._loadIndex) {
            //This callback got replaced.
            return;
          }

          if (items.length === 0) {
            this.infinite.enable(false);
            this.loaded.emit([]);
          }
          else {
            //First load?
            if (this.items.length === 0) {
              this.infinite.enable(true);
            }
            this.items.push.apply(this.items, items);
            this.loaded.emit(items);

            //Shame on you, infinite.  Need to manually re-trigger _onScroll, Issue #1111
            setTimeout(() => {
              this.infinite._lastCheck = 0;
              this.infinite._onScroll();
            }, 0);
          }
        }
        else {
          this.loaded.emit([]);
        }
      }
      finally {
        if (infiniteEvent !== null) {
          infiniteEvent.complete();
        }
      }
    })().catch(console.error);
  }
}

3、使用方法

<ion-infinite-scroll streamer [items]="items" [loadMore]="getNextItems">
  <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>