🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A pull down to refresh component implemented in vue.js.

Other

Documentation

vue-pull-refresh

Build Status

A pull down refresh component implements by vuejs 2.0 for mobile.

Demo

Demo

PS: Please use browsers that support Promise

Usage

Install

npm install vue-pull-refresh --save

CommonJS

var VuePullRefresh = require('vue-pull-refresh');  new Vue({     components: {         'vue-pull-refresh': VuePullRefresh     },     data: function () {         return {};     },     methods: {         onRefresh: function() {             return new Promise(function (resolve, reject) {                 setTimeout(function () {                     resolve();                 }, 1000);             });         }     },     template: '<vue-pull-refresh :on-refresh="onRefresh"></vue-pull-refresh>' });

ES6

import VuePullRefresh from 'vue-pull-refresh';  new Vue({     components: {         'vue-pull-refresh': VuePullRefresh     },     data: function () {         return {};     },     methods: {         onRefresh: function() {             return new Promise(function (resolve, reject) {                 setTimeout(function () {                     resolve();                 }, 1000);             });         }     },     template: '<vue-pull-refresh :on-refresh="onRefresh"></vue-pull-refresh>' });

Props

Property Description
onRefresh refresh event;Should return a promise.
config {
errorLabel: label shows when error
startLabel: label shows when pull down start
readyLabel: label shows when ready to refresh
loadingLabel: label shows when loading
pullDownHeight: the height toggle pull down refresh action
}

Contribution

First, install dependencies

npm install 

Second, setup development environment

npm run dev 

License

MIT


You May Also Like