Component that adds Pull to refresh functionality to an <ons-page> element.
It can be used to perform a task when the user pulls down at the top of the page. A common usage is to refresh the data displayed in a page.
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.
| Name | Type | Description |
|---|---|---|
| disabled | If this attribute is set the “pull-to-refresh” functionality is disabled. Optional. | |
| height | String | Specify the height of the component. When pulled down further than this value it will switch to the “preaction” state. The default value is “64px”. Optional. |
| threshold-height | String | Specify the threshold height. The component automatically switches to the “action” state when pulled further than this value. The default value is “96px”. A negative value will disable this property. If this value is lower than the height, it will skip “preaction” state. Optional. |
| fixed-content | If this attribute is set the content of the page will not move when pulling. Optional. |
| Name | Description |
|---|---|
| fixedContent | If this property is set the content of the page will not move when pulling. |
| 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 | The current number of pixels the pull hook has moved. |
| disabled | Whether the element is disabled or not. |
| Name | Description |
|---|---|
| changestate | Fired when the state is changed. The state can be either “initial”, “preaction” or “action”. |
| pull | Fired when the pull hook is pulled. |
Fired when the state is changed. The state can be either “initial”, “preaction” or “action”.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.pullHook | Object | Component object. |
| event.state | String | Current state. |
Fired when the pull hook is pulled.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.ratio | Object | The pulled distance ratio (scroll / height). |
| event.animationOptions | String | The animation options object. |
If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.
For bug reports and feature requests use our GitHub Issues page.