Vue 2 Reference > v-ons-pull-hook

v-ons-pull-hook

Component that adds Pull to refresh functionality to an <v-ons-page> component. 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.

Tutorial

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.

Props

Name Type Description
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 If this attribute is set the “pull-to-refresh” functionality is disabled. Optional.
fixed-content Boolean If this attribute is set the content of the page will not move when pulling. 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.

Events

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.
changestate

Fired when the state is changed. The state can be either “initial”, “preaction” or “action”.

Parameters
Name Type Description
event Object Event object.
event.pullHook Object Component object.
event.state String Current state.
pull

Fired when the pull hook is pulled.

Parameters
Name Type Description
event Object Event object.
event.ratio Object The pulled distance ratio (scroll / height).
event.animationOptions String The animation options object.

Need Help?

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.