https://github.com/lakb248/vue-pull-refresh
A pull down refresh component implement by vuejs
https://github.com/lakb248/vue-pull-refresh
Last synced: 4 months ago
JSON representation
A pull down refresh component implement by vuejs
- Host: GitHub
- URL: https://github.com/lakb248/vue-pull-refresh
- Owner: lakb248
- License: mit
- Created: 2016-11-18T01:46:02.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2020-08-27T07:46:34.000Z (about 5 years ago)
- Last Synced: 2025-06-15T17:17:16.436Z (5 months ago)
- Language: Vue
- Size: 46.9 KB
- Stars: 142
- Watchers: 5
- Forks: 43
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-pull-refresh - A pull to refresh component for Vue.js 2.0. (Components & Libraries / UI Components)
- awesome-vue-refactor - vue-pull-refresh
- awesome-vue-zh - Vue拉刷新 - Vue.js 2.0的pull to refresh组件. (UI组件 / 拉来刷新)
- awesome-vue - vue-pull-refresh - A pull to refresh component for Vue.js 2.0. (UI Components / Pull-to-refresh)
README
# vue-pull-refresh
[](https://travis-ci.org/lakb248/vue-pull-refresh)
> A pull down refresh component implements by vuejs 2.0 for mobile.
## Demo
[Demo](https://lakb248.github.io/vue-pull-refresh)
PS: Please use browsers that support Promise
## Usage
### Install
```bash
npm install vue-pull-refresh --save
```
### CommonJS
```javascript
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: ''
});
```
### ES6
```javascript
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: ''
});
```
### 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](http://opensource.org/licenses/MIT)