ionic2下拉刷新和上拉加载功能实现

先看代码：

<!--默认显示出来的数据-->
<ion-list>
    <ion-item *ngFor="let i of items">{{i}}</ion-item>
</ion-list>
<!--上拉加载设置-->
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
            loadingSpinner="bubbles"
            loadingText="加载更多。。。。">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>

.ts:

export class InfinitePage {
  public items:any=[];
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.items=[]
    for (let i = 0; i < 10; i++) {
      this.items.push( this.items.length );
    }

  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad InfinitePage');
  }

  doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
      for (let i = 0; i < 10; i++) {//相当于是设置每次上拉加载显示的加载的数据条数美上拉加载一次加载几条数据显示
        this.items.push( this.items.length );
      }

      console.log('Async operation has ended');
      infiniteScroll.complete();
    }, 500);
  }

下拉刷新：

html:

<ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
            pullingIcon="arrow-dropdown"
            pullingText="Pull to refresh"
            refreshingSpinner="circles"
            refreshingText="刷新...">
    </ion-refresher-content>
</ion-refresher>

<!--默认显示出来的数据-->
<ion-list>
    <ion-item *ngFor="let i of items">{{i}}</ion-item>
</ion-list>

ts:

doRefresh(refresher) {//请求数据的请求方法可以写在这个函数里面
  console.log('Begin async operation', refresher);
  setTimeout(() => {
    this.items = [];//items是后台返回的数据 
    for (var i = 0; i < 5; i++) {//下拉刷新一次刷新几条数据显示（下拉刷新后当前页面显示几条数据）
      this.items.push( this.items.length );
    }
    console.log('Async operation has ended');
    refresher.complete();
  }, 2000);
}

1.  doRefresh(refresher) {  
2.         //console.log('Begin async operation', refresher);  
3.       setTimeout(() => {  
4.           this.BindUserModule();   //绑定方法  这里面可以加自己的方法处理数据
5.        console.log('Async operation has ended');  
6.       refresher.complete();  
7.      }, 1000);  

官方文档：

InfiniteScroll

无限滚动允许您在用户从页面的底部或顶部滚动指定的距离时执行操作。

当用户滚动到指定的距离时，将调用分配给无限事件的表达式。 当这个表达式完成任务时，它应该在无限滚动实例上调用complete（）方法。

Usage

<ion-content>

 <ion-list>
   <ion-item *ngFor="let i of items">{{i}}</ion-item>
 </ion-list>

 <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>

</ion-content>

@Component({...})
export class NewsFeedPage {
  items = [];

  constructor() {
    for (let i = 0; i < 30; i++) {
      this.items.push( this.items.length );
    }
  }

  doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
      for (let i = 0; i < 30; i++) {
        this.items.push( this.items.length );
      }

      console.log('Async operation has ended');
      infiniteScroll.complete();
    }, 500);
  }

}

waitFor method of InfiniteScroll

如果您的异步操作返回承诺，您可以在模板中使用waitFor方法。

参考网址：

https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/

下拉刷新：

无限滚动允许您在用户从页面的底部或顶部滚动指定的距离时执行操作。


当用户滚动到指定的距离时，将调用分配给无限事件的表达式。 当这个表达式完成任务时，它应该在无限滚动实例上调用complete（）方法。

注意：不要将ion-refresher包裹在* ngIf中。 它不会这样正常渲染。 请改用启用的属性来显示或隐藏刷新。

Usage

<ion-content>

  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

</ion-content>

@Component({...})
export class NewsFeedPage {

  doRefresh(refresher) {
    console.log('Begin async operation', refresher);

    setTimeout(() => {
      console.log('Async operation has ended');
      refresher.complete();
    }, 2000);
  }

}

默认情况下，Ionic为用户所在的平台提供了最佳的拉动图标和刷新微调。 但是，您可以更改默认图标和微调框，以及通过向子离子再现内容组件添加属性，为每个状态添加文本。

<ion-content>

  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>

</ion-content>

参考：https://ionicframework.com/docs/api/components/refresher/Refresher/