Refresher

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

用来实现下拉刷新功能。

使用方法

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

Refresher Content

<ion-content>  <ion-refresher (refresh)="doRefresh($event)">    <ion-refresher-content      pullingIcon="arrow-dropdown"      pullingText="Pull to refresh"      refreshingSpinner="circles"      refreshingText="Refreshing...">    </ion-refresher-content>  </ion-refresher></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

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