Refresher

ion-refresher

ion-refresher 提供了内容组件上的拉式刷新功能。使用时需要把 ion-refresher 放在 ion-content的 头部。页面可以监听refresher的各种输出事件。当用户拉下足够多的时间来启动刷新的进程时，刷新输出事件就会被触发。一旦异步操作完成，刷新应该结束，将调用complete()。

Note: Do not wrap the ion-refresher in a *ngIf. It will not render properly this way. Please use the enabled property instead to display or hide the refresher.

用法

<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);
  }

}

修改刷新组件内容

ion-refresher组件提供了默认了图标和刷新的spinner，你可以通过向ion-refresher-content组件添加属性来更改。

<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>

自定义刷新组件内容

ion-refresher组件保存刷新逻辑。它需要一个子组件来显示内容。Ionic在默认情况下使用了ion-refresher-content。这个组件显示更新，并根据更新的状态改变外观。分离这些组件可以让开发人员创建他们自己的更新内容组件。您可以使用自定义SVG或CSS动画来替换我们的默认内容。

实例成员

1. cancel() // 将刷新状态从refreshing 改为 cancelling.
2. complete() // 当您的async操作完成时，调用complete()。它会将刷新状态从refreshing 改为 completing.
3. currentY // 当前触摸或鼠标事件的Y坐标。
4. deltaY // 拉的开始与当前触摸或鼠标事件的Y坐标之间的距离。
5. progress // 一个数字表示用户已经拖了多远。数字0表示用户没有向下拉。数字1和任何大于1的东西都表示用户已经拖得够远了，当它们松开时，
6. startY // 用户从哪里开始向下拉内容的Y坐标。
7. state 刷新组件的状态。包括：

• inactive - The refresher is not being pulled down or refreshing and is currently hidden.
• pulling - The user is actively pulling down the refresher, but has not reached the point yet that if the user lets go, it’ll refresh.
• cancelling - The user pulled down the refresher and let go, but did not pull down far enough to kick off the refreshing state. After letting go, the refresher is in the cancelling state while it is closing, and will go back to the inactive state once closed.
• ready - The user has pulled down the refresher far enough that if they let go, it’ll begin the refreshing state.
• refreshing - The refresher is actively waiting on the async operation to end. Once the refresh handler calls complete() it will begin the completing state.
• completing - The refreshing state has finished and the refresher is in the process of closing itself. Once closed, the refresher will go back to the inactive state.

输入属性

属性	类型	详解
closeDuration	number	关闭刷新需要多少毫秒。默认是280。
enabled	boolean	刷新是否启用。不能使用ngIf,默 认是true。
pullMax	number	在刷新器自动进入刷新状态之前，拉拔的最大距离。默认情况下，拉的最大值将是pullMin + 60。
pullMin	number	在进入刷新状态之前，用户必须向下拉。默认是60。
snapbackDuration	number	重新回到刷新状态需要多少毫秒的时间。默认是280。

输出事件

属性	类型
ionPull	当用户正在拉下内容并显示更新时发出的。
ionRefresh	当用户松开的时候，它会被释放出来，远远超过了pullMin，会触发刷新hander，状态更新到refreshing 。在您的刷新处理程序中，当您的async操作完成时，您必须调用complete()方法。
ionStart	当用户开始向下拉时发出。

Sass Variables

查询地址