Component that adds Pull to refresh functionality to an
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.
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.
VOnsPullHook component has three different states:
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
Every time the state changes the, a
changestate event is fired.
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
This will be called in the
|disabled||Boolean||If this attribute is set the “pull-to-refresh” functionality is disabled. Optional.|
|fixedContent||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.|
|thresholdHeight||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.|
|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”.
Fired when the pull hook is pulled.
|event.ratio||Object||The pulled distance ratio (scroll / height).|
|event.animationOptions||String||The animation options object.|
For bug reports and feature requests use our GitHub Issues page.