OnsPullHook Directive (ons-pull-hook)

<ons-pull-hook>要素のためのAngular2ディレクティブです。

実例

Pull Hook

Pull hookはいわゆるpull-to-refreshを実現するためのUIコンポーネントです。Onsen UIではons-pull-hook要素を使って宣言します。

まずコンポーネントのテンプレート中にons-pull-hook要素を宣言し、振る舞いは(changestate)バインディングや(action)バインディングに記述します。

@Component({
  selector: 'app',
  template: `
  <ons-page>
    <ons-toolbar>
      <div class="center">Pull Hook</div>
    </ons-toolbar>

    <div class="content">
      <ons-pull-hook height="64px" threshold-height="128px" (changestate)="onChangeState($event)" (action)="onAction($event)">
        {{message}}
      </ons-pull-hook>
    </div>
  </ons-page>
  `
})

(action)イベントバインディングは、Pull hookがthreshold-height属性で指定した以上に引き出された時に呼び出されます。一度のこの状態になると、pull hookはロード中の状態になって下に引き出されたままの状態になります。一般的に、この状態ではアプリケーションは何らかの読み込み処理を行います。

このpull hookを元の状態に戻すには、$eventdone()メソッドを呼び出すことで元の状態に戻ります。pull hookを使う際には適切なタイミングで$event.done()を呼び出して下さい。

  onAction($event) {
    // 1秒後に元の状態に戻す
    setTimeout(() => {
      $event.done();
    }, 1000);
  }

状態の変化を検知する

ons-pull-hookには次の3つの状態があります。

  • initial - 最初の状態
  • preaction - 途中までpull hookが引き出された状態
  • action - pull hookが完全に引き出されている状態

pull hookは最初にinitial状態になります。pull hookが引き出されている時点ではpreaction状態になります。threshold-height属性で指定した以上に引き出されるとaction状態になり、$event.done()巻数が呼び出されるとinitial状態に戻ります。

状態の変化に応じてなんらかの処理をする場合には(changestate)イベントバインディングを利用します。

<ons-pull-hook height="64px" threshold-height="128px" (changestate)="onChangeState($event)" (action)="onAction($event)">
  {{message}}
</ons-pull-hook>

その時の状態名は$event.stateで参照することができます。

onChangeState($event) {
  console.log($event.state);
}

属性

名前 型 / デフォルト値 概要
disabled この属性がある時、disabled状態になりアクションが実行されなくなります Optional.
height String コンポーネントの高さを指定します。この高さ以上にpull downすると”preaction”状態に移行します。デフォルトの値は”64px”です。 Optional.
threshold-height String 閾値となる高さを指定します。この値で指定した高さよりもpull downすると、このコンポーネントは自動的に”action”状態に移行します。 Optional.
fixed-content この属性がある時、プルフックが引き出されている時にもコンテンツは動きません。 Optional.

プロパティ概要

名前 概要
onAction This will be called in the action state if it exists. The function will be given a done callback as it’s first argument. (翻訳中)
onPull Hook called whenever the user pulls the element. It gets the pulled distance ratio (scroll / height) and an animationOptions object as arguments. (翻訳中)
height The height of the pull hook in pixels. The default value is 64px. (翻訳中)
thresholdHeight The thresholdHeight of the pull hook in pixels. The default value is 96px. (翻訳中)
state Current state of the element. (翻訳中)
pullDistance 現在のプルフックが引き出された距離をピクセル数。
disabled 無効化されている場合にtrue

Outputs

名前 概要
action ons-pull-hook要素のアクションが必要なときに呼び出されます。
changestate ons-pull-hook要素の状態が変わった時に呼び出されます。
pull ons-pull-hook要素がプルされているときに呼び出されます。

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。