Refresher Component (刷新器组件)

概述

下拉刷新组件主要通过两个组件实现： ion-refresher 和 ion-refresher-content。为了正常工作，下拉刷新组件必须是 ion-content 的直接子元素，并放置在 fixed 插槽中。当用户下拉内容时，下拉刷新组件会通过加载指示器和可选文本提供视觉反馈。

来源： core/src/components/refresher/refresher.tsx29-39 core/src/components/refresher-content/refresher-content.tsx14-18

状态和生命周期

下拉刷新组件通过一个包含六种不同状态的状态机来运行。

来源： core/src/components/refresher/refresher.tsx62-71 core/src/components/refresher/refresher.tsx855-864

实现类型

下拉刷新组件有两种实现类型：

原生下拉刷新：利用平台特定的刷新功能。
自定义下拉刷新：使用 CSS 变换和动画的自定义实现。

来源： core/src/components/refresher/refresher.utils.ts212-232 core/src/components/refresher/refresher.tsx149-166

原生下拉刷新 vs. 自定义下拉刷新

原生下拉刷新

原生下拉刷新利用平台内置的滚动行为，带来更自然的感觉。

在 iOS 上，它使用回弹滚动和下拉时出现的刻度标记。
在 Material Design 上，它提供了一个 Material 风格的下拉指示器。
当以下条件满足时，原生下拉刷新会被启用：
- 下拉刷新内容中存在加载指示器元素。
- 在 iOS 上，设备支持回弹滚动。
- 或者在使用 Material Design 模式时。

自定义下拉刷新

自定义实现被用作回退方案，并且：

使用 CSS 变换来移动内容。
为下拉和刷新状态提供自定义动画。
在所有平台上都能一致工作，但缺乏一些原生体验。

来源： core/src/components/refresher/refresher.tsx419-447 core/src/components/refresher/refresher.utils.ts216-232

手势处理

下拉刷新组件使用 Ionic 的手势系统来处理下拉交互并确定何时刷新内容。

来源： core/src/components/refresher/refresher.tsx570-702 core/src/components/refresher/refresher.tsx704-726

核心实现

下拉刷新组件实现为一个 Stencil 组件，具有特定的属性、方法和内部状态管理。

关键属性

属性	类型	默认	描述
pullMin	数字	60	触发下拉刷新的最小拉动距离。
pullMax	数字	pullMin + 60	最大拉动距离。
closeDuration	字符串	'280ms'	关闭下拉刷新所需的时间。
snapbackDuration	字符串	'280ms'	回弹到刷新状态所需的时间。
pullFactor	数字	1	拉动速度的乘数。
disabled	布尔值	false	下拉刷新是否被禁用。