跳到主要内容
版本：v7

ion-refresher

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

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

基本用法​

下拉属性​

刷新器具有多个用于自定义下拉手势的属性。设置 pullFactor 可更改下拉速度，pullMin 属性可更改用户必须下拉的最小距离，pullMax 属性可更改用户必须下拉的最大距离（之后刷新器将进入 refreshing 状态）。

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

自定义刷新器内容​

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

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

原生刷新器​

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

在 Ionic 中，iOS 和 Material Design 的原生刷新器默认启用。然而，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​

DescriptionTime it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher.
Attributeclose-duration
Typestring
Default'280ms'

disabled​

DescriptionIf true, the refresher will be hidden.
Attributedisabled
Typeboolean
Defaultfalse

mode​

DescriptionThe mode determines which platform styles to use.

This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attributemode
Type"ios" ｜ "md"
Defaultundefined

pullFactor​

DescriptionHow 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.
Attributepull-factor
Typenumber
Default1

pullMax​

DescriptionThe 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.
Attributepull-max
Typenumber
Defaultthis.pullMin + 60

pullMin​

DescriptionThe 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.
Attributepull-min
Typenumber
Default60

snapbackDuration​

DescriptionTime 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.
Attributesnapback-duration
Typestring
Default'280ms'

事件​

NameDescriptionBubbles
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​

DescriptionChanges the refresher's state from refreshing to cancelling.
Signaturecancel() => Promise<void>

complete​

DescriptionCall 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.
Signaturecomplete() => Promise<void>

getProgress​

DescriptionA 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.
SignaturegetProgress() => Promise<number>

CSS Shadow Parts​

No CSS shadow parts available for this component.

CSS 自定义属性​

No CSS custom properties available for this component.

插槽​

No slots available for this component.

Contents

编辑此页