首页 » 技术分享 » Refresher

Refresher

 

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

4、deltaY

用户开始下拉到当前位置的Y或者鼠标事件的Y坐标

5、progress

一个代表用户已经下拉了多远的数字。0代表用户还没有开始下拉,而1或者比1更大的数字代表用户已经下拉了足够远,一旦他们释放就会触发refresh事件。如果他们释放了但是这个数字小于1的话,那么refresh事件就不会触发,并且控件会回到初始状态。

6、complete()

当同步操作完成之后就可以调用complete(),并且会把状态从refreshing设置成complete。

7、cancel()

会把状态设置回canceling

五、输入属性

1、pullMin

refresher通过用户下拉进入refreshing状态的最小距离,默认是60.

2、pullMax

当拉倒这个最大距离的时候,会自动进入refreshing状态,默认是pullMin+60

3、closeDuration

多少毫秒之后关掉refresher,默认是280

4、snapbackDuration

多少毫秒之后让refresher迅速恢复到刷新状态,默认是280

5、enabled

6、输出事件

1、ionRefresh()

当用户下拉距离超过pullMin并且释放,那么refresher会被激活如果他的状态是refreshing,在你的方法中,必须要有complete方法。

2、ionPull()

当用户下拉并且暴露出refresher时触发。

3、ionStart

当用户开始下拉刷新时触发。

        

转载自原文链接, 如需删除请联系管理员。

原文链接:Refresher,转载请注明来源!

0