A pull down refresh component implements by vuejs 2.0 for mobile.
PS: Please use browsers that support Promise
npm install vue-pull-refresh --savevar 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>'
});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>'
});| 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 } |
First, install dependencies
npm install
Second, setup development environment
npm run dev