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 和微調器文件。
與虛擬捲動搭配使用
重新整理器需要捲動容器才能運作。使用虛擬捲動解決方案時，您需要停用 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 |
| 類型 | 字串 |
| 預設值 | '280ms' |
disabled
| 描述 | 如果為 true，則重新整理器會隱藏。 |
| 屬性 | disabled |
| 類型 | 布林值 |
| 預設值 | false |
mode
| 描述 | 模式決定要使用哪個平台的樣式。 |
| 屬性 | mode |
| 類型 | "ios" ｜ "md" |
| 預設值 | 未定義 |
pullFactor
| 描述 | 下拉速度的倍數。若要減慢下拉動畫的速度，請傳遞小於 1 的數字。若要加快下拉的速度，請傳遞大於 1 的數字。預設值為 1，等於游標的速度。如果傳遞負值，則因數將改為 1。例如：如果傳遞的值為 1.2，並且內容拖曳了 10 個像素，則內容會下拉 12 個像素，而不是 10 個像素（增加 20%）。如果傳遞的值為 0.8，則拖曳量會是 8 個像素，小於游標移動的量。當重新整理器內容使用微調器時，這不適用，會啟用原生重新整理器。 |
| 屬性 | pull-factor |
| 類型 | 數字 |
| 預設值 | 1 |
pullMax
| 描述 | 下拉的最大距離，直到重新整理器自動進入 refreshing 狀態。預設值為 pullMin + 60 的結果。當重新整理器內容使用微調器時，這不適用，會啟用原生重新整理器。 |
| 屬性 | pull-max |
| 類型 | 數字 |
| 預設值 | this.pullMin + 60 |
pullMin
| 描述 | 使用者必須下拉的最小距離，直到重新整理器進入 refreshing 狀態。當重新整理器內容使用微調器時，這不適用，會啟用原生重新整理器。 |
| 屬性 | pull-min |
| 類型 | 數字 |
| 預設值 | 60 |
snapbackDuration
| 描述 | 重新整理器彈回 refreshing 狀態所需的時間。當重新整理器內容使用微調器時，這不適用，會啟用原生重新整理器。 |
| 屬性 | snapback-duration |
| 類型 | 字串 |
| 預設值 | '280ms' |
事件
| 名稱 | 描述 | 冒泡 |
|---|---|---|
ionPull | 當使用者下拉內容並顯示重新整理器時發出。 | true |
ionRefresh | 當使用者鬆開內容，且已下拉超過 pullMin 或下拉內容並超過 pullMax 時發出。將重新整理器狀態更新為 refreshing。當非同步操作完成時，應呼叫 complete() 方法。 | true |
ionStart | 當使用者開始下拉時發出。 | true |
方法
取消
| 描述 | 將刷新器的狀態從 refreshing 變更為 cancelling。 |
| 簽名 | cancel() => Promise<void> |
完成
| 描述 | 當您的非同步操作完成時，呼叫 complete()。例如，當應用程式正在執行非同步操作時（例如從 AJAX 請求接收更多資料）時，狀態為 refreshing。一旦接收到資料，您就可以呼叫此方法來表示刷新已完成並關閉刷新器。此方法也會將刷新器的狀態從 refreshing 變更為 completing。 |
| 簽名 | complete() => Promise<void> |
getProgress
| 描述 | 一個數字，表示使用者下拉的距離。數字 0 表示使用者完全沒有下拉。數字 1 以及任何大於 1 的數字表示使用者下拉的距離已足夠，當他們放開時就會發生刷新。如果他們放開時數字小於 1，則不會發生刷新，並且內容將返回其原始位置。 |
| 簽名 | getProgress() => Promise<number> |
CSS Shadow Parts
此元件沒有可用的 CSS shadow parts。
CSS 自訂屬性
此元件沒有可用的 CSS 自訂屬性。
插槽
此元件沒有可用的插槽。