Vue 拉动刷新并加载更多内容组件 – vuejs-loadmore

Vue 拉动刷新并加载更多内容组件 – vuejs-loadmore
插件名称 vuejs-loadmore
发布时间 2021年12月16日
插件作者 staticdeng

loadmore 是一个 Vue 组件,它可以更轻松地实现原生移动应用程序,例如拉动刷新和拉动以在 Web 应用程序中加载更多功能。

安装和下载:

# NPM
$ npm i vuejs-loadmore

使用:

1、安装并导入VueLoadmore组件。

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

2. 注册组件。

Vue.use(VueLoadmore);

3. 将 VueLoadmore 组件添加到应用程序中。

<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.所有可用的组件道具。

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: '请求失败,点击重新加载'
}