ionic 2 起航控件的使用客户列表场景(四)

　　接下来，我们的客户列表要怎么刷新数据呢？

　　我们不会安卓开发，不会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();

ionic 2 起航 控件的使用 客户列表场景(四)

ionic 2 起航控件的使用客户列表场景(四)