The PullHook 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 PullHook 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 onChange property will be called.
When the component transitions into the action state, it will call the onLoad property with a done callback as an argument. Calling this function will cause it to return to the initial state.
| 名前 | 型 / デフォルト値 | 概要 |
|---|---|---|
| disabled | この属性がある時、disabled状態になりアクションが実行されなくなります Optional. | |
| height | String | コンポーネントの高さを指定します。この高さ以上にpull downすると”preaction”状態に移行します。デフォルトの値は”64px”です。 Optional. |
| threshold-height | String | 閾値となる高さを指定します。この値で指定した高さよりもpull downすると、このコンポーネントは自動的に”action”状態に移行します。 Optional. |
| fixed-content | この属性がある時、プルフックが引き出されている時にもコンテンツは動きません。 Optional. |
| 名前 | 概要 |
|---|---|
| fixedContent | この属性がある時、プルフックが引き出されている時にもコンテンツは動きません。 |
| onAction |
This will be called in the action state if it exists. The function will be given a done callback as its 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。
|
| 名前 | 概要 |
|---|---|
| changestate | コンポーネントの状態が変わった場合に発火します。状態は、”initial”, “preaction”, “action”のいずれかです。 |
| pull | Fired when the pull hook is pulled. （翻訳中） |
コンポーネントの状態が変わった場合に発火します。状態は、”initial”, “preaction”, “action”のいずれかです。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | イベントオブジェクト。 |
| event.pullHook | Object | コンポーネントのオブジェクト。 |
| event.state | String | 現在の状態名を参照できます。 |
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に記載をお願いいたします。
あわせて、下記の情報も参考にしてください。