Refresher

    xiaoxiao2021-08-24  232

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

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

            

    转载请注明原文地址: https://ju.6miu.com/read-677000.html

    最新回复(0)