Pull Down to Refresh     

When you want to allow the user to refresh the content or add newest content.

Basic Usage

Use QPullToRefresh component as direct child of your page component, to encapsulate all its content. Refer to the source on the demo for a more detailed example.

<q-pull-to-refresh :handler="refresher">
<!-- Content, whatever you like -->
<p v-for="item in items">
Lorem ipsum dolor sit amet...

Do not wrap <q-pull-to-refresh> by a <div class="layout-padding>". If you must, place that <div> as direct child of <q-pull-to-refresh>.

Vue Properties

Vue PropertyTypeDefault ValueDescription
handlerFunctionRequired Method from VM to be called to load more content
distanceNumber35Minimum threshold distance in pixels to determine if releasing will determine a refresh
pull-messageString‘Pull down to refresh’Message to display before hitting the threshold above
release-messageString‘Release to refresh’Message to display after hitting the threshold above and before releasing
refresh-messageString‘Refreshing…’Message to display when refreshing content
refresh-iconString‘refresh’Icon to display when refreshing the content, besides the text above
disableBooleanfalseWhen set to true it disables its functionality. If no value is provided (empty attribute), then it’s considered as set to true.

Vue Methods

Vue MethodDescription
@triggerTriggers a refresh, calling your handler.


The handler Function (specified as DOM element property) takes one parameter:

methods: {
refresher (done) {
// done - Function to call when you made all necessary updates.
// DO NOT forget to call it otherwise the refresh message
// will continue to be displayed

// make some Ajax call then call done()