OnsPullHook Directive (ons-pull-hook)

Angular directive for <ons-pull-hook> component.

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.

Tutorial

Tutorial will be added soon.
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.

Outputs

Name Type Description
action Triggers when the page is pulled down.
changestate Triggers when the state is changed.
pull Triggers whenever the element is pulled.

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.