Skip to main content
Version: v8

ion-refresher

リフレッシャーは、コンテンツコンポーネントにプルトゥリフレッシュ機能を提供します。pull-to-refreshパターンは、ユーザがより多くのデータを取得するために、データのリストをプルダウンすることを可能にします。

データは、リフレッシャーの出力イベント中に変更する必要があります。非同期処理が完了し、リフレッシュが終了したら、リフレッシュに対して complete() を呼び出す必要があります。

基本的な使い方​

Pull プロパティ​

リフレッシャーには、引くジェスチャーをカスタマイズするためのプロパティがいくつかあります。 pullFactor プロパティを設定すると引っ張るスピードを、pullMin プロパティを設定するとユーザが引っ張る最小距離を、pullMax プロパティを設定するとリフレッシャーが refreshing 状態になる前にユーザが引っ張る最大距離を変更することができます。

これらのプロパティは、native refresherが有効な場合には適用されません。

カスタムリフレッシャーコンテンツ​

デフォルトのアイコン、スピナー、テキストは、リフレッシャーの状態が pulling か refreshing かによって、リフレッシャーコンテンツ 上でカスタマイズすることができます。

pullingIconを設定すると、native refresherが無効になります。

Native Refreshers​

iOSとAndroidの両プラットフォームは、pull-to-refreshにネイティブのような流動的な感覚を与えるために、それぞれのデバイスが公開するプロパティを使用するリフレッシュ機能を提供します。

iOSとMaterial Designのネイティブリフレッシュ機能は、Ionicのデフォルトで有効になっています。ただし、iOSネイティブのリフレッシュ機能は、正しく動作するためにラバーバンドスクロールに依存しており、結果としてiOSデバイスとのみ互換性があります。ラバーバンドスクロールをサポートしていないデバイスでiOSモードで動作するアプリのために、フォールバックリフレッシャーを提供しています。

ネイティブのリフレッシャーでは、マテリアルデザイン用の circular スピナーを使用しますが、iOS では lines スピナーを使用します。iOSでは、ティックマークはページが下に引っ張られるにつれて徐々に表示されます。

Pullプロパティ、closeDuration、snapbackDurationのような特定のリフレッシャープロパティは、ネイティブリフレッシャーの多くがスクロールベースであるため、互換性がありません。サポートされていないプロパティの詳細については、Propertiesを参照してください。

リフレッシュコンテンツの pullingIcon を任意のアイコンまたはスピナーに設定することで、ネイティブリフレッシュモードを無効にすることができます。使用可能な値については、Ionicons および Spinner のドキュメントを参照してください。

Usage with Virtual Scroll​

Refresher が機能するためには、スクロールコンテナが必要です。仮想スクロールを使用する場合は、ion-content のスクロールを無効にし、.ion-content-scroll-host クラスターゲットで、どの要素コンテナがスクロールコンテナを担当するかを指定する必要があります。

Developers should apply the following CSS to the scrollable container. This CSS adds a "rubber band" scrolling effect on iOS which allows the native iOS refresher to work properly:

.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;
}

高度な使用法​

リフレッシャーはどのようなタイプのコンテンツでも使用できますが、ネイティブアプリでよくある使用例は、更新時に更新されるデータのリストを表示することです。以下の例では、アプリはデータのリストを生成し、更新が完了したときにリストの先頭にデータを追加します。実際のアプリでは、ネットワークまたはデータベース呼び出しによってリクエストを送信した後に、データを受信して更新します。

Event Handling​

Using ionPullStart and ionPullEnd​

The ionPullStart event is emitted when the user begins a pull gesture. This event fires when the user starts to pull the refresher down.

The ionPullEnd event is emitted when the refresher returns to an inactive state, with a reason property of 'complete' or 'cancel' indicating whether the refresh operation completed successfully or was canceled.

Console
Console messages will appear here when logged from the example above.

Interfaces​

RefresherEventDetail​

interface RefresherEventDetail {
  complete(): void;
}

RefresherPullEndEventDetail​

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

RefresherCustomEvent​

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

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

RefresherPullEndCustomEvent​

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with the ionPullEnd event.

interface RefresherPullEndCustomEvent extends CustomEvent {
  detail: RefresherPullEndEventDetail;
  target: HTMLIonRefresherElement;
}

プロパティ​

closeDuration​

Descriptionリフレッシャーを閉じるのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。
Attributeclose-duration
Typestring
Default'280ms'

disabled​

Descriptiontrueの場合、リフレッシャーは非表示となる。
Attributedisabled
Typeboolean
Defaultfalse

mode​

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。

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​

Description引きの速さを何倍にするか。引きのアニメーションを遅くするには、1より小さい数値を渡します。引っ張る速度を速くするには、1より大きい数値を渡します。デフォルト値は 1 で、カーソルの速度と同じです。もし負の値が渡された場合、代わりに 1 が係数となります。 例えば例えば、渡された値が 1.2 で、コンテンツが 10 ピクセルでドラッグされた場合、10 ピクセルではなく、12 ピクセルでドラッグされます（20% の増加です）。渡された値が 0.8 の場合、ドラッグされた量はカーソルの移動量より少ない 8 ピクセルとなります。 リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。
Attributepull-factor
Typenumber
Default1

pullMax​

Descriptionリフレッシャーが自動的に refreshing 状態になるまでの、引っ張りの最大距離。デフォルトは pullMin + 60 の結果です。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。
Attributepull-max
Typenumber
Defaultthis.pullMin + 60

pullMin​

Descriptionリフレッシャーが refreshing 状態になるまでに、ユーザが引き下げるべき最小距離。リフレッシャーコンテンツがスピナーを使用する場合は適用されず、ネイティブリフレッシャーが有効になる。
Attributepull-min
Typenumber
Default60

snapbackDuration​

Descriptionリフレッシャーが refreshing 状態にスナップバックするのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシュが有効になります。
Attributesnapback-duration
Typestring
Default'280ms'

イベント​

NameDescriptionBubbles
ionPullユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発行されます。true
ionRefreshユーザーがコンテンツから手を離し、pullMinを越えて下に引いたとき、またはコンテンツを下に引き、pullMaxを越えたときに発行されます。リフレッシャーの状態を refreshing に更新します。非同期処理が完了したら complete() メソッドを呼び出す必要があります。true
ionStartユーザーが引き下げを開始するときに発行されます。true

メソッド​

cancel​

Descriptionリフレッシュの状態を refreshing から cancelling に変更します。
Signaturecancel() => Promise<void>

complete​

Description非同期操作が完了したら complete() を呼び出します。例えば、refreshing状態は、アプリがAJAXリクエストからより多くのデータを受信するなど、非同期操作を実行している間です。データを受信したら、このメソッドを呼び出して、リフレッシュが完了したことを示し、リフレッシュャを閉じます。このメソッドは、リフレッシャーの状態を refreshing から completing に変更します。
Signaturecomplete() => Promise<void>

getProgress​

Descriptionユーザーがどれだけ下に引っ張られたかを表す数値です。数値 0 は、ユーザーが全く下に引いていないことを表します。数値 1 および 1 より大きい数値は、ユーザーが手を離したときに更新が行われるほど十分に下に引っ張られたことを表します。もしユーザーが手を離し、数値が 1 より小さい場合は、更新は行われず、コンテンツは元の位置に戻ります。
SignaturegetProgress() => Promise<number>

CSS Shadow Parts​

No CSS shadow parts available for this component.

CSSカスタムプロパティ​

No CSS custom properties available for this component.

Slots​

No slots available for this component.

Contents

Edit this page