Pull Down to Refresh     

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

Installation

Edit /quasar.conf.js:

framework: {
components: ['QPullToRefresh']
}

Basic Usage

Use QPullToRefresh component as direct child of your page component, to encapsulate all its content. Refer to the source of 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...
</p>
</q-pull-to-refresh>

IMPORTANT
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
colorString(v0.17+) One from Quasar Color Palette.
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
inlineBooleanfalseIf the component is not direct child of QPage, set this to “true”.
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.

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()
}
}
}