一、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,转载请注明来源!