Vue移动端上拉加载下拉刷新组件

推荐一个Vue移动端上拉加载下拉刷新组件，通过提供简单的api易于使用。

预览

在线demo

也可以扫描以下二维码访问演示：

安装

安装 npm 包

# npm
npm install vuejs-loadmore --save

全局导入

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

Vue.use(VueLoadmore);

用法

基本用法

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

on-refresh和 on-loadmore当拉刷新或滚动至底部会触发，在处理数据请求后需要执行的回调函数done()。

如果你不需要刷新，只是不要绑定on-refresh。

当数据请求完成后，finished需要将finished改为true。

下面是一个完整的例子：

export default {
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      finished: 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++;
    }
  },
}