Refresher

优质
小牛编辑
130浏览
2023-12-01

用来实现下拉刷新功能。

使用方法

  1. <ion-content>
  2. <ion-refresher (refresh)="doRefresh($event)">
  3. <ion-refresher-content></ion-refresher-content>
  4. </ion-refresher>
  5. <!-- 其他代码 -->
  6. </ion-content>
  1. @Page({...})
  2. export class NewsFeedPage {
  3. doRefresh(refresher) {
  4. console.log('Begin async operation', refresher);
  5. setTimeout(() => {
  6. console.log('Async operation has ended');
  7. refresher.complete();
  8. }, 2000);
  9. }
  10. }

Refresher Content

  1. <ion-content>
  2. <ion-refresher (refresh)="doRefresh($event)">
  3. <ion-refresher-content
  4. pullingIcon="arrow-dropdown"
  5. pullingText="Pull to refresh"
  6. refreshingSpinner="circles"
  7. refreshingText="Refreshing...">
  8. </ion-refresher-content>
  9. </ion-refresher>
  10. </ion-content>

实例方法

state

获取当前的刷新状态。状态有:

  • inactive

    没有下拉,被隐藏状态

  • pulling

    用户正在下拉,但还没松手。

  • cancelling

    用户下拉放手后,没有达到触发刷新的距离的状态。

  • ready

    用户下拉的足够远,如果放手就开始更新。

  • refreshing

    正在刷新,等待异步操作结束。

  • completing

    刷新成功的状态。

startY

返回用户开始下拉的Y坐标

currentY

返回当前触摸或鼠标事件的Y坐标。

deltaY

返回开始下拉的Y坐标距离当前触摸或鼠标事件的Y坐标的差值。

progress

0代表还没有到达某个距离,不触发刷新,1代表已经到达某个距离,松手触发刷新。

complete()

当你异步操作完成后,调用这个函数来关闭刷新动画,同时改变了状态。

cancel()

将状态从refreshing改变成cancelling

输入

属性名称类型描述
pullMinnumber用户最小的下拉距离,默认为60
pullMaxnumber用户下拉的最大距离,超过该距离后,自动进入刷新。默认最大距离为:pullmin+60。
closeDurationnumber多少毫秒它需要关闭组件,默认为280
snapbackDurationnumber默认280
enabledboolean是否启用该组件

输出事件

  • refresh

    刷新事件。不要忘记在异步事件执行完成后调用complete()

  • pulling

    当用户下拉的时候调用。

  • start

    当用户开始下拉的时候调用。