ionic4 ionInfinite 滚动加载 遇到的坑 详解

欢迎来到Altaba的博客间，20190308
今天是2019年的女神姐，转眼间2019年都3月8号， 2019年的计划继续…

随公司项目，开发移动端app,技术使用 angular7+ionic4，期间使用到了ionic4的滚动加载组件

<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>

大家都知道，ionInfinite是滚动触发的钩子函数，实践发现，该函数触发是有一些比较“搞事情”的问题的，当我们设置的分页加载，每一页的数据无法让页面达到滚动，当一页数据很少没法让页面出现滚动条的时候，这时候我们尝试去滚动触发这个函数是触发不了的，如下方法，可以解决此问题。

尝试写这样一个指令

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);
  }
}

使用方式

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

结语： 这样就可以实现了，如果大家遇到此问题并通过上述方法解决了问题，请给我留言，感谢！