Refresher

最新推荐文章于 2025-08-02 09:55:39 发布

翻译最新推荐文章于 2025-08-02 09:55:39 发布 · 1.5k 阅读

Ionic2 专栏收录该内容

19 篇文章

订阅专栏

一、ion-refresher

该组件提供了上拉刷新功能在content组件中，把ion-refresh作为你的ion-content节点的第一个子元素。页面可以监听到刷新者的不同输出事件，这个refresh输出事件会在用下下拉足够的开始刷新的距离时触发。一旦同步操作结束并且刷新应该被停止的时候，就调用complete();

注意：不要用*ngIf包裹refresher，他将不会正确显示，请使用enabled来决定他是否显示。

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

}

二、refresher-content

在默认情况下，ionic提供了下拉图片和下拉列表组件，但是，如果你要改变这些默认选项的话，你可以使用refresh-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-refersh组件控制着刷新逻辑，他需要一个子控件来显示内容，ionic默认使用ion-refersh-content，这个组件展示refresher并且根据刷新状态来更改其样式。我们把这些组件分离出来以便于开发人员能够创建自己的refresh-content，你可以用自己的svg或者css来替换默认的。

四、实例成员

1、state

refresher的当前状态。

（1）inactive：refresher没有正在被下拉并且处于隐藏状态。

（2）pulling：用户正在下拉，但是没有到临界点，如果用户放开的话则刷新

（3）canceling：用户下拉并且释放，但是不足够远来触发刷新状态。在释放之后，refresher会处于canceling状态当其正在关闭，一旦他关闭就会恢复到inactive状态。

（4）ready：用户下拉的足够远，并且一旦用户释放，就会开始刷新

（5）refreshing：refresher正在显示直到同步操作结束，一旦refresh的complete()被回调，就会开始complete状态。

（6）complete：refreshing状态结束并且refresher正在关闭，一旦关闭，refresher就会回到inactive状态。

2、startY：

用户开始下拉的Y坐标

3、currentY