跳到主要内容
版本：v8

ion-refresher

Refresher 在内容组件上提供下拉刷新功能。下拉刷新模式允许用户下拉数据列表以获取更多数据。

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

基本用法​

下拉属性​

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

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

自定义刷新器内容​

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

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

原生刷新器​

iOS 和 Android 平台都提供了使用各自设备暴露的属性来实现流畅、类原生下拉刷新体验的刷新器。

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

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

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

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

与虚拟滚动一起使用​

Refresher 需要一个滚动容器才能工作。使用虚拟滚动解决方案时，您需要禁用 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;
}

高级用法​

虽然刷新器可以用于任何类型的内容，但原生应用中一个常见的用例是显示在刷新时更新的数据列表。在下面的示例中，应用生成一个数据列表，然后在刷新完成时将数据追加到列表顶部。在真实应用中，数据将在通过网络或数据库调用发送请求后接收和更新。

事件处理​

使用 ionPullStart 和 ionPullEnd​

ionPullStart 事件在用户开始下拉手势时触发。该事件在用户开始向下拉动刷新器时触发。

ionPullEnd 事件在刷新器返回非活动状态时触发，其 reason 属性为 'complete' 或 'cancel'，指示刷新操作是否成功完成或已取消。

控制台
控制台消息将在上方示例中调用 console.log 时显示在此处。

接口​

RefresherEventDetail​

interface RefresherEventDetail {
  complete(): void;
}

RefresherPullEndEventDetail​

interface RefresherPullEndEventDetail {
  reason: 'complete' | 'cancel';
}

RefresherCustomEvent​

虽然不是必需的，但此接口可以替代 CustomEvent 接口，为此组件发出的 Ionic 事件提供更强的类型支持。

interface RefresherCustomEvent extends CustomEvent {
  detail: RefresherEventDetail;
  target: HTMLIonRefresherElement;
}

RefresherPullEndCustomEvent​

虽然不是必需的，但此接口可以替代 CustomEvent 接口，为 ionPullEnd 事件提供更强的类型支持。

interface RefresherPullEndCustomEvent extends CustomEvent {
  detail: RefresherPullEndEventDetail;
  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
ionPullEndEmitted when the refresher has returned to the inactive state after a pull gesture. This fires whether the refresh completed successfully or was canceled.true
ionPullStartEmitted when the user begins to start pulling down.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
ionStart (已弃用)Emitted when the user begins to start pulling down.

已弃用 — Use ionPullStart instead.		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 Shadow Parts​

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

CSS 自定义属性​

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

插槽​

该组件没有可用的插槽。

目录

编辑此页