ionic上拉加载

ionic上拉加载-爬坑之路

Vue功夫都还不够就又开始学习Ionic了，工作任务也没其他办法了。工作了将近一年，慢慢的领悟到，理解一门技术（语言）的思想，有优秀的逻辑思维比认识一门技术（语言）重要的太多太多。思想是融会贯通的！

正题：上拉加载

背景：由于要实现一个分页列表，所以必须要提供上拉加载更多的功能。马上百度了一下，但国内的答案,在我这并没有触发效果（应该是答案更新落后）

<ion-infinite-scroll
      icon="ion-loading-c"
      ng-if="moreDataCanBeLoaded()"
      on-infinite="loadMore()"
      distance="10%">
    </ion-infinite-scroll>

然后我去官网(英文)、github查看了一些例子之后：

<ion-infinite-scroll (ionInfinite)="loadMore($event)" *ngIf="hasMore()">
    <ion-infinite-scroll-content
      loadingSpinner="dots">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

效果有了！一开始想自定义一些东东，结果也是问题多多，经过一番摸索之后总算解决了。这里记录一下这些问题。

过程中遇到的问题：

1：

问题：无显示加载条
原因：因为我觉得底部的加载框太大，然后我再css样式中把他自带的min-height:84px改为0，估计是通过这些值来判断是否到达底部的吧，所以不能改为0

2:

问题：滑动到底部之后正常加载了一次之后，再滑到底部只出现滑动条，没有执行加载更多的操作
原因：刚开始以为是*ngIf=”hasMore()”我的这个方法搞的鬼，最后发现是加载的过程一直没有终止，也就是执行了一次loadMore()，这个loadMore()必须结束掉才能出发下一次loadMore()
措施：
给loadMore传进来ion-infinite-scroll的事件实例，

(ionInfinite)="loadMore($event)"

代码中，一旦请求完成之后，$event.complete()手动结束

   /* 加载更多 */
  loadMore (loadEvent) {
    this.page++;
    this.postAlarmListV2(loadEvent)
  }
   /* 获取报警信息 带上啦加载控制*/
  postAlarmListV2(loadEvent) {
    this.http.request(this.installUrl())
      .toPromise()
      .then(res => {
        var result = res.json()
        this.pageCount = result.pageCount
        this.alarmResult = result
        this.pageAlarmList = result.data
        this.alarmList = this.alarmList.concat(this.pageAlarmList)
        loadEvent.complete()
        console.log('加载更多' + result)
      })
      .catch(err => {
        console.log('请求失败' + err)
        loadEvent.complete()
      });
  }

笔记

改变加载文字:

loadingText="加载更多"

改变加载图标:

loadingSpinner="ios/ios-small/bubbles/circles/crescent/dots"