v-ons-pull-hook

実例

Pull to refresh

The VOnsPullHook component is used to add a pull to refresh functionality to a page. It can let the user refresh a page or load the latest data.

The VOnsPullHook component has three different states: initial, preaction and action. It starts in the initial state. When it’s pulled down below its height it will transition into the preaction state. If it’s released in initial state it will just bounce back. If it’s released in the preaction state, it will go into action state.

Every time the state changes the, a changestate event is fired.

Through the action prop it is possible to provide a handler that runs when the component reaches “action” state. This handler gets a done function as a parameter that must be called when the action is finished, thus returning to the initial state.

名前 型 / デフォルト値 概要
action Function This will be called in the action state if exists. The function will be given a done callback as it’s first argument. (翻訳中) Optional.
disabled Boolean この属性がある時、disabled状態になりアクションが実行されなくなります Optional.
fixed-content Boolean この属性がある時、プルフックが引き出されている時にもコンテンツは動きません。 Optional.
height String コンポーネントの高さを指定します。この高さ以上にpull downすると”preaction”状態に移行します。デフォルトの値は”64px”です。 Optional.
threshold-height String 閾値となる高さを指定します。この値で指定した高さよりもpull downすると、このコンポーネントは自動的に”action”状態に移行します。 Optional.
名前 概要
changestate コンポーネントの状態が変わった場合に発火します。状態は、”initial”, “preaction”, “action”のいずれかです。
pull Fired when the pull hook is pulled. (翻訳中)
changestate

コンポーネントの状態が変わった場合に発火します。状態は、”initial”, “preaction”, “action”のいずれかです。

パラメーター
名前 概要
event Object イベントオブジェクト。
event.pullHook Object コンポーネントのオブジェクト。
event.state String 現在の状態名を参照できます。
pull

Fired when the pull hook is pulled. (翻訳中)

パラメーター
名前 概要
event Object イベントオブジェクト。
event.ratio Object The pulled distance ratio (scroll / height). (翻訳中)
event.animationOptions String The animation options object. (翻訳中)

お困りですか?

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

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

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