Skip to main content
Version: v6

ion-refresher

コンテンツ

RefresherはContentコンポーネント引っ張って更新する機能を提供します。 ユーザーはより多くのデータを取得するために、 タッチ操作でリストを引っ張って更新できます。

データはRefresherの外部のイベントで更新すべきです。 一回の非同期処理が完了すれば、complete()を呼び出すことで、 Refresherも終了するべきです。

Native Refreshers

iOS と Android の両プラットフォームは、それぞれのデバイスで公開されているプロパティを利用したリフレッシュ機能を提供しており、Pull によるリフレッシュがネイティブに近い流動的な感覚を与えます。

pullMinsnapbackDuration` などの特定のプロパティは、ネイティブのリフレッシャーの多くがスクロールベースであるため、互換性がありません。詳しくは Refresher Properties を参照してください。

iOS での使用法

iOS ネイティブの ion-refresher を使用するには、 ion-refresher-contentpullingIcon プロパティを、使用可能なスピナーのいずれかに設定する必要があります。利用可能な値については、Spinner Documentation を参照してください。 pullingIcon のデフォルトは、iOS の lines スピナーです。ユーザーがページをプルダウンすると、スピナーの目盛りが徐々に表示されます。

iOS ネイティブの ion-refresher は、正しく動作するためにラバーバンドスクロールに依存しており、その結果、iOS デバイスにのみ対応しています。ラバーバンドスクロールをサポートしないデバイスで iOS モードで動作するアプリのために、フォールバックリフレッシュを提供しています。

Android での使用方法

MD ネイティブの ion-refresher を使用するには、 ion-refresher-contentpullingIcon プロパティに、使用可能なスピナーのいずれかの値を設定する必要があります。利用可能な値については、ion-spinner Documentation を参照してください。 pullingIcon のデフォルトは、MDの circular スピナーです。

仮想スクロールの使用方法

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

<ion-content scroll-y="false">
<ion-refresher slot="fixed">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<virtual-scroll-element class="ion-content-scroll-host">
<!-- Your virtual scroll content -->
</virtual-scroll-element>
</ion-content>

Interfaces

RefresherEventDetail

interface RefresherEventDetail {
complete(): void;
}

RefresherCustomEvent

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

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

使い方

<!-- Default Refresher -->
<ion-content>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>

<!-- Custom Refresher Properties -->
<ion-content>
<ion-refresher slot="fixed" pullFactor="0.5" pullMin="100" pullMax="200">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>

<!-- Custom Refresher Content -->
<ion-content>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="chevron-down-circle-outline"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
</ion-content>
import { Component } from '@angular/core';

@Component({
selector: 'refresher-example',
templateUrl: 'refresher-example.html',
styleUrls: ['./refresher-example.css'],
})
export class RefresherExample {
constructor() {}

doRefresh(event) {
console.log('Begin async operation');

setTimeout(() => {
console.log('Async operation has ended');
event.target.complete();
}, 2000);
}
}

プロパティ

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

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'

イベント

NameDescription
ionPullEmitted while the user is pulling down the content and exposing the refresher.
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.
ionStartEmitted when the user begins to start pulling down.

メソッド

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.

Slots

No slots available for this component.

View Source