ion-refresher
刷新器在内容组件上提供下拉刷新功能。下拉刷新模式允许用户下拉数据列表以检索更多数据。
应在刷新器的输出事件期间修改数据。一旦异步操作完成并且应该结束刷新，需要在刷新器上调用 `complete()`。
基本用法
下拉属性
刷新器有几个属性可以用来自定义下拉手势。设置 `pullFactor` 以更改下拉速度，`pullMin` 属性以更改用户必须下拉的最小距离，`pullMax` 属性以更改用户在刷新器进入 `refreshing` 状态之前必须下拉的最大距离。
这些属性在启用 原生刷新器 时不适用。
自定义刷新器内容
可以在 刷新器内容 上根据刷新器的状态是 `pulling` 还是 `refreshing` 来自定义默认图标、微调器和文本。
设置 `pullingIcon` 将禁用 原生刷新器。
原生刷新器
iOS 和 Android 平台都提供刷新器，这些刷新器使用其各自设备公开的属性，以便下拉刷新具有流畅的原生感觉。
iOS 和 Material Design 原生刷新器在 Ionic 中默认启用。但是，原生 iOS 刷新器依赖于橡皮筋滚动才能正常工作，因此仅与 iOS 设备兼容。我们为在不支持橡皮筋滚动的设备上以 iOS 模式运行的应用提供了一个后备刷新器。
原生刷新器使用 `circular` 微调器用于 Material Design，而 iOS 使用 `lines` 微调器。在 iOS 上，刻度线将在页面下拉时逐渐显示。
某些刷新器属性，例如 下拉属性、`closeDuration` 和 `snapbackDuration` 不兼容，因为大多数原生刷新器都是基于滚动的。有关不支持的属性的更多信息，请参阅 属性。
原生刷新器可以通过在 刷新器内容 上将 `pullingIcon` 设置为任何图标或微调器来禁用。有关接受的值，请参阅 Ionicons 和 微调器 文档。
与虚拟滚动一起使用
刷新器需要滚动容器才能运行。当使用虚拟滚动解决方案时，您需要禁用 `ion-content` 上的滚动，并使用 `.ion-content-scroll-host` 类目标指示哪个元素容器负责滚动容器。
开发人员应该将以下 CSS 应用于可滚动容器。此 CSS 在 iOS 上添加了“橡皮筋”滚动效果，这使得原生 iOS 刷新器能够正常工作。
.ion-content-scroll-host::before,
.ion-content-scroll-host::after {
position: absolute;
width: 1px;
height: 1px;
content: "";
}
.ion-content-scroll-host::before {
bottom: -1px;
}
.ion-content-scroll-host::after {
top: -1px;
}
高级用法
虽然刷新器可以与任何类型的内容一起使用，但在原生应用中的常见用例是显示在刷新时更新的数据列表。在下面的示例中，应用生成一个数据列表，然后在刷新完成后将数据追加到列表顶部。在真实的应用中，数据将在通过网络或数据库调用发送请求后接收和更新。
接口
RefresherEventDetail
interface RefresherEventDetail {
complete(): void;
}
RefresherCustomEvent
虽然不是必需的，但此接口可以代替 `CustomEvent` 接口，以对从该组件发出的 Ionic 事件进行更强的类型化。
interface RefresherCustomEvent extends CustomEvent {
detail: RefresherEventDetail;
target: HTMLIonRefresherElement;
}
属性
closeDuration
| 描述 | 关闭刷新器所需的时间。当刷新器内容使用微调器（启用原生刷新器）时不适用。 |
| 属性 | close-duration |
| 类型 | string |
| 默认 | '280ms' |
disabled
| 描述 | 如果为 `true`，刷新器将隐藏。 |
| 属性 | disabled |
| 类型 | boolean |
| 默认 | false |
mode
| 描述 | 模式决定使用哪个平台样式。 |
| 属性 | mode |
| 类型 | "ios" ｜ "md" |
| 默认 | undefined |
pullFactor
| 描述 | 将下拉速度乘以多少。要减慢下拉动画速度，请传递小于 `1` 的数字。要加快下拉速度，请传递大于 `1` 的数字。默认值为 `1`，它等于光标的速度。如果传递一个负值，则因子将为 `1`。 例如：如果传递的值为 `1.2` 并且内容被拖动 `10` 像素，则内容将被拖动 `12` 像素（增加 20%），而不是 `10` 像素。如果传递的值为 `0.8`，则拖动量将为 `8` 像素，小于光标移动的量。 当刷新器内容使用微调器（启用原生刷新器）时不适用。 |
| 属性 | pull-factor |
| 类型 | number |
| 默认 | 1 |
pullMax
| 描述 | 下拉的最大距离，超过此距离刷新器将自动进入 `refreshing` 状态。默认值为 `pullMin + 60` 的结果。当刷新器内容使用微调器（启用原生刷新器）时不适用。 |
| 属性 | pull-max |
| 类型 | number |
| 默认 | this.pullMin + 60 |
pullMin
| 描述 | 用户必须下拉的最小距离，超过此距离刷新器将进入 `refreshing` 状态。当刷新器内容使用微调器（启用原生刷新器）时不适用。 |
| 属性 | pull-min |
| 类型 | number |
| 默认 | 60 |
snapbackDuration
| 描述 | 刷新器弹回 `refreshing` 状态所需的时间。当刷新器内容使用微调器（启用原生刷新器）时不适用。 |
| 属性 | snapback-duration |
| 类型 | string |
| 默认 | '280ms' |
事件
| 名称 | 描述 | 冒泡 |
|---|---|---|
ionPull | 当用户下拉内容并显示刷新器时发出。 | true |
ionRefresh | 当用户松开内容并向下拖动超过pullMin或向下拖动并超过pullMax时发出。将刷新器状态更新为refreshing。当异步操作完成时，应调用complete()方法。 | true |
ionStart | 当用户开始向下拖动时发出。 | true |
方法
cancel
| 描述 | 将刷新器的状态从refreshing更改为cancelling。 |
| 签名 | cancel() => Promise<void> |
complete
| 描述 | 当异步操作完成时，调用complete()。例如，refreshing状态是在应用程序执行异步操作时，例如从 AJAX 请求接收更多数据。数据接收完成后，您可以调用此方法来表示刷新已完成并关闭刷新器。此方法还会将刷新器的状态从refreshing更改为completing。 |
| 签名 | complete() => Promise<void> |
getProgress
| 描述 | 一个数字，表示用户向下拖动了多远。数字0表示用户没有向下拖动。数字1及大于1的任何数字，表示用户向下拖动到足以使他们在松开时发生刷新的程度。如果他们在松开时数字小于1，则刷新不会发生，内容将恢复到其原始位置。 |
| 签名 | getProgress() => Promise<number> |
CSS 阴影部分
此组件没有可用的 CSS 阴影部分。
CSS 自定义属性
此组件没有可用的 CSS 自定义属性。
插槽
此组件没有可用的插槽。