跳到主要内容
版本：v7

ion-refresher

Refresher（刷新器）在内容组件上提供下拉刷新功能。下拉刷新模式让用户向下拉数据列表以检索更多数据。

数据应在刷新器的输出事件期间进行修改。一旦异步操作完成并应结束刷新，需要在刷新器上调用 complete()。

基本用法​

拉动属性​

刷新器有几个用于自定义拉动手势的属性。设置 pullFactor 以更改拉动的速度，pullMin 属性更改用户必须下拉的最小距离，pullMax 属性更改刷新器进入 refreshing 状态前用户必须下拉的最大距离。

当启用了原生刷新器时，这些属性不适用。

自定义刷新器内容​

默认的图标、旋转器和文本可以根据刷新器状态是 pulling 还是 refreshing 在刷新器内容（refresher content）上进行自定义。

设置 pullingIcon 将禁用原生刷新器。

原生刷新器​

iOS 和 Android 平台都提供了使用各自设备暴露的属性的刷新器，从而使下拉刷新具有流畅、类似原生的感觉。

iOS 和 Material Design 原生刷新器在 Ionic 中默认启用。然而，原生 iOS 刷新器依赖于橡皮筋滚动才能正常工作，因此仅与 iOS 设备兼容。我们为在不支持橡皮筋滚动的设备上以 iOS 模式运行的应用提供了回退刷新器。

原生刷新器在 Material Design 中使用 circular 旋转器，而 iOS 使用 lines 旋转器。在 iOS 上，随着页面下拉，刻度标记会逐渐显示。

某些刷新器属性，如拉动属性、closeDuration 和 snapbackDuration 不兼容，因为原生刷新器大部分是基于滚动的。有关不受支持属性的更多信息，请参阅属性。

可以通过将刷新器内容上的 pullingIcon 设置为任何图标或旋转器来禁用原生刷新器。请参阅 Ionicons 和旋转器（Spinner）文档了解可接受的值。

与虚拟滚动一起使用​

刷新器需要滚动容器才能运行。使用虚拟滚动解决方案时，需要禁用 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​

说明Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher.
属性close-duration
类型string
默认值'280ms'

disabled​

说明If true, the refresher will be hidden.
属性disabled
类型boolean
默认值false

mode​

说明The mode determines which platform styles to use.

这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。
属性mode
类型"ios" ｜ "md"
默认值undefined

pullFactor​

说明How much to multiply the pull speed by. To slow the pull animation down, pass a number less than 1. To speed up the pull, pass a number greater than 1. The default value is 1 which is equal to the speed of the cursor. If a negative value is passed in, the factor will be 1 instead.

For example: If the value passed is 1.2 and the content is dragged by 10 pixels, instead of 10 pixels the content will be pulled by 12 pixels (an increase of 20 percent). If the value passed is 0.8, the dragged amount will be 8 pixels, less than the amount the cursor has moved.

Does not apply when the refresher content uses a spinner, enabling the native refresher.
属性pull-factor
类型number
默认值1

pullMax​

说明The maximum distance of the pull until the refresher will automatically go into the refreshing state. Defaults to the result of pullMin + 60. Does not apply when the refresher content uses a spinner, enabling the native refresher.
属性pull-max
类型number
默认值this.pullMin + 60

pullMin​

说明The minimum distance the user must pull down until the refresher will go into the refreshing state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
属性pull-min
类型number
默认值60

snapbackDuration​

说明Time it takes the refresher to snap back to the refreshing state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
属性snapback-duration
类型string
默认值'280ms'

事件​

Name说明冒泡
ionPullEmitted while the user is pulling down the content and exposing the refresher.true
ionRefreshEmitted when the user lets go of the content and has pulled down further than the pullMin or pulls the content down and exceeds the pullMax. Updates the refresher state to refreshing. The complete() method should be called when the async operation has completed.true
ionStartEmitted when the user begins to start pulling down.true

方法​

cancel​

说明Changes the refresher's state from refreshing to cancelling.
签名cancel() => Promise<void>

complete​

说明Call complete() when your async operation has completed. For example, the refreshing state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request. Once the data has been received, you then call this method to signify that the refreshing has completed and to close the refresher. This method also changes the refresher's state from refreshing to completing.
签名complete() => Promise<void>

getProgress​

说明A number representing how far down the user has pulled. The number 0 represents the user hasn't pulled down at all. The number 1, and anything greater than 1, represents that the user has pulled far enough down that when they let go then the refresh will happen. If they let go and the number is less than 1, then the refresh will not happen, and the content will return to it's original position.
签名getProgress() => Promise<number>

CSS 阴影部分​

该组件没有可用的 CSS 阴影部分。

CSS 自定义属性​

该组件没有可用的 CSS 自定义属性。

插槽​

该组件没有可用的插槽。

目录

编辑此页