ionic上拉加载-爬坑之路
来源:互联网 发布:ammnra折叠刀淘宝 编辑:程序博客网 时间:2024/05/16 06:25
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"
阅读全文
0 0
- ionic上拉加载-爬坑之路
- ionic 上拉加载
- ionic 上拉加载更多
- Ionic上拉刷新下拉加载更多
- Ionic 上拉刷新,下拉加载
- ionic上拉加载更多解决方法
- ionic上拉加载更多问题
- ionic---上拉加载下拉刷新
- ionic 上拉加载和下拉刷新
- ionic 上拉加载更多详细步骤
- ionic+上拉刷新,下拉加载
- Ionic之如何使用ion-infinite-scroll实现上拉加载,下拉刷新的功能
- ionic 实现下拉刷新上拉加载更多
- ionic 下拉刷新和上拉加载更多
- angular+ionic 的app上拉加载更新数据实现
- ionic ——— 下拉刷新及上拉加载
- ionic和angular上拉加载的问题
- ionic 上拉菜单的样式坑
- 数据库基础知识
- 条件查找mongo, 并打印指定记录的单项Item
- Android动画之帧动画
- 【Jmeter学习01】Jmeter的介绍与下载安装
- SQL server 2008 R2 增加sa身份验证登陆
- ionic上拉加载-爬坑之路
- Fiddler教程--简介
- 关于Java Web框架之一的SpringMVC中Controller的返回值类型的理解
- classloader load apk
- textview文字过多,只显示前几个字,以...结束
- Unity延时功能的几种实现
- 数据倾斜问题和滑动窗口uv统计问题
- Hadoop中hdfs的架构解析
- Create-react-app+Antd+Less配置