首页 » 技术分享 » Refresher

Refresher

　
评论关闭　788次浏览

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