标签：
接下来，我们的客户列表要怎么刷新数据呢？
我们不会安卓开发，不会ios开发，没关系，我们还有ionic 2。ionic 2的控件 Ion-refresher 轻松帮我们搞掂。
<!--下拉刷新--> <ion-refresher (refresh)="doRefresh($event)"> <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="正在刷新数据..."> </ion-refresher-content> </ion-refresher>
1.ion-refresher控件
(refresh)="doRefresh($event)" ,当刷新的时候触发的后台的doRefresh方法。($event)是一个事件参数
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="正在刷新数据...",刷新的时候展示的文字
控件的事件如下：
refresh 刷新事件。不要忘记在异步事件执行完成后调用complete()
pulling 当用户下拉的时候调用。
start 当用户开始下拉的时候调用。
好了，我们看下后台的处理事件
//滚动条下拉刷新 doRefresh(refresher) { console.log(‘Begin async operation‘, refresher); setTimeout(() => { this.items = [ ‘数据更新了请注意‘, ‘数据更新了榆中县城农电公司‘, ‘数据更新了Aires‘, ‘数据更新了Cairo‘, ‘数据更新了Dhaka‘, ‘数据更新了Edinburgh‘, ‘数据更新了Geneva‘, ‘数据更新了Genoa‘, ‘数据更新了Glasglow‘, ‘数据更新了Hanoi‘, ‘数据更新了Hong Kong‘, ‘数据更新了Islamabad‘, ‘数据更新了Istanbul‘, ‘数据更新了Jakarta‘, ‘数据更新了Kiel‘, ‘数据更新了Kyoto‘, ‘数据更新了Le Havre‘, ‘数据更新了Lebanon‘, ‘数据更新了Lhasa‘, ‘数据更新了Washington‘ ]; refresher.complete(); }, 2000); }
在这里，给this.Items重新赋值。前台就能重新刷新数据了。
接下来，我们要实现底部下拉加载数据的功能了
前台html页面
<!--滚动条底部加载数据--> <ion-infinite-scroll (infinite)="doInfinite($event)"> <ion-infinite-scroll-content></ion-infinite-scroll-content> </ion-infinite-scroll>
1.ion-infinite-scroll ，滑动滚动条触发加载事件
(infinite)="doInfinite($event)",加载触发后台doInfinite()方法
2.后台代码
doInfinite(infiniteScroll) { setTimeout(() => { for (var i = 0; i < 500; i++) { this.items.push(‘榆中县城农电公司‘ + i); } console.log(‘Async operation has ended‘); infiniteScroll.complete(); }, 1000); }
1.this.items.push，给数据源推入数据
2.函数最后别忘记加infiniteScroll.complete();
标签：
原文地址：http://www.cnblogs.com/Linyb/p/5434132.html
