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"
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值