ionic ionInfinite 滚动加载失效

<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是滚动触发的钩子函数，实践发现，该函数触发是有一些比较“搞事情”的问题的，当我们设置的分页加载，每一页的数据无法让页面达到滚动，当一页数据很少没法让页面出现滚动条的时候，这时候我们尝试去滚动触发这个函数是触发不了的。

个人理解：把每次加载数据的大小设置尽量设置成大于整个屏幕显示的数量即可，如果数据量小也要求实现加载功能可以创建指令。

原文链接：https://blog.csdn.net/Altaba/java/article/details/88355229，未亲测，大家可以借鉴。

1、创建文件

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>