Quasar
Pull Down to Refresh
When you want to allow the user to refresh the content or add 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 on the demo for a more detailed example.
<q-pull-to-refresh :handler="refresher"> |
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 Property | Type | Default Value | Description |
|---|---|---|---|
handler |
Function | Required Method from VM to be called to load more content | |
distance |
Number | 35 | Minimum threshold distance in pixels to determine if releasing will determine a refresh |
pull-message |
String | ‘Pull down to refresh’ | Message to display before hitting the threshold above |
release-message |
String | ‘Release to refresh’ | Message to display after hitting the threshold above and before releasing |
refresh-message |
String | ‘Refreshing…’ | Message to display when refreshing content |
refresh-icon |
String | ‘refresh’ | Icon to display when refreshing the content, besides the text above |
inline |
Boolean | false | If the component is not direct child of QPage, set this to “true”. |
disable |
Boolean | false | When 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 Method | Description |
|---|---|
@trigger |
Triggers 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()
}
}
}