Pull To Refresh & Load More Component For Vue - loadmore

Install & Download:

# NPM
$ npm i vuejs-loadmore

Description:

loadmore is a Vue component that makes it easier to implement native mobile app like pull to refresh and pull to load more functionalities in your web applications.

How to use it:

1. Install and import the VueLoadmore component.

import Vue from 'vue';
import VueLoadmore from 'vuejs-loadmore';

2. Register the component.

Vue.use(VueLoadmore);

3. Add the VueLoadmore component to the app.

<vue-loadmore 
  :on-refresh="onRefresh" 
  :on-loadmore="onLoad"
  :finished="finished"
  :error.sync="error">>
  <div v-for="(item, i) of list" :key="i"></div>
</vue-loadmore>

export default {
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      finished: false,
      error: false,
    };
  },
  methods: {
    onRefresh(done) {
      this.list = [];
      this.page = 1;
      this.finished = false;
      this.fetch();
      done();
    },
    onLoad(done) {
      if (this.page <= 10) {
        this.fetch();
      } else {
        // all data loaded
        this.finished = true;
      }
      done();
    },
    fetch() {
      for (let i = 0; i < this.pageSize; i++) {
        this.list.push(this.list.length + 1);
      }
      this.page++;
    }
  },
}

4. All available component props.

onRefresh: Function,
pullingText: {
  type: String,
  default: '下拉刷新'
},
loosingText: {
  type: String,
  default: '释放刷新'
},
refreshText: {
  type: String,
  default: '正在刷新'
},
successText: {
  type: String,
  default: '刷新完成'
},
showSuccessText: {
  type: Boolean,
  default: true
},
pullDistance: {
  type: [Number, String],
  default: 50
},
headHeight: {
  type: [Number, String],
  default: 50
},
animationDuration: {
  type: [Number, String],
  default: 200
},
// 上拉加载
onLoadmore: Function,
immediateCheck: {
  type: Boolean,
  default: true
},
loadOffset: {
  type: [Number, String],
  default: 50
},
finished: Boolean,
error: Boolean,
loadingText: {
  type: String,
  default: 'Loading'
},
finishedText: {
  type: String,
  default: 'No more data'
},
errorText: {
  type: String,
  default: '请求失败，点击重新加载'
}