ion-refresher
リフレッシャーは、コンテンツコンポーネントにプルダウン更新機能を提供します。プルダウン更新パターンにより、ユーザーはデータのリストをプルダウンして、さらにデータを取得できます。
データは、リフレッシャーの出力イベント中に変更する必要があります。非同期操作が完了し、更新を終了する必要がある場合は、リフレッシャーで `complete()` を呼び出す必要があります。
基本的な使い方
プルプロパティ
リフレッシャーには、プルジェスチャをカスタマイズするためのいくつかのプロパティがあります。`pullFactor` を設定してプルの速度を変更し、`pullMin` プロパティを設定してユーザーがプルダウンする必要がある最小距離を変更し、`pullMax` プロパティを設定してリフレッシャーが `refreshing` 状態になる前にユーザーがプルダウンする必要がある最大距離を変更します。
ネイティブリフレッシャーが有効になっている場合、これらのプロパティは適用されません。
カスタムリフレッシャーコンテンツ
デフォルトのアイコン、スピナー、およびテキストは、リフレッシャーの状態が `pulling` か `refreshing` かに基づいて、リフレッシャーコンテンツでカスタマイズできます。
`pullingIcon` を設定すると、ネイティブリフレッシャーが無効になります。
ネイティブリフレッシャー
iOSとAndroidの両方のプラットフォームは、それぞれのデバイスによって公開されているプロパティを使用して、プルダウン更新に滑らかでネイティブのような感触を与えるリフレッシャーを提供します。
iOSとマテリアルデザインのネイティブリフレッシャーは、Ionicではデフォルトで有効になっています。ただし、ネイティブiOSリフレッシャーは、正しく動作するためにラバーバンドスクロールに依存しており、結果としてiOSデバイスとのみ互換性があります。ラバーバンドスクロールをサポートしていないデバイスでiOSモードで実行されているアプリのために、フォールバックリフレッシャーを提供しています。
ネイティブリフレッシャーは、マテリアルデザインには `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
必須ではありませんが、このインターフェースは、このコンポーネントから発行されるIonicイベントでより強力なタイピングを行うために、`CustomEvent` インターフェースの代わりに使用できます。
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` ピクセルだけドラッグされた場合、`10` ピクセルの代わりにコンテンツは `12` ピクセル（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（真） |
メソッド
cancel（キャンセル）
| 説明 | リフレッシャーの状態をrefreshingからcancellingに変更します。 |
| シグネチャ | cancel() => Promise<void> |
complete（完了）
| 説明 | 非同期操作が完了したら、complete()を呼び出します。たとえば、refreshing状態は、アプリがAJAXリクエストからより多くのデータを受信するなど、非同期操作を実行している間です。データが受信されたら、このメソッドを呼び出して、更新が完了し、リフレッシャーを閉じます。このメソッドは、リフレッシャーの状態をrefreshingからcompletingにも変更します。 |
| シグネチャ | complete() => Promise<void> |
getProgress（進捗を取得）
| 説明 | ユーザーがどれだけ下にプルダウンしたかを表す数値です。数値0は、ユーザーがまったくプルダウンしていないことを表します。数値1、および1より大きい数値は、ユーザーが手を離すと更新が発生するのに十分な距離までプルダウンしたことを表します。手を離したときに数値が1未満の場合、更新は行われず、コンテンツは元の位置に戻ります。 |
| シグネチャ | getProgress() => Promise<number> |
CSSシャドウパーツ
このコンポーネントで使用可能なCSSシャドウパーツはありません。
CSSカスタムプロパティ
このコンポーネントで使用可能なCSSカスタムプロパティはありません。
スロット
このコンポーネントで使用可能なスロットはありません。