关于前端:vue移动端下拉刷新和上拉加载组件体积小运行快

上面介绍一款 vue 挪动端下拉刷新和上拉加载组件，体积小运行快，应用起来很简略。

一个 Vue.js 的下拉刷新和上拉加载组件。

通过提供简略的 api 易于应用。与其余组件库不同，它应用浏览器自身而不是 js 来作滚动容器，因而它的代码量更小，但不损失用户体验。

中文 | English

预览

在线 demo

也能够扫描以下二维码拜访演示：

<img src=”https://user-images.githubusercontent.com/20060839/145163261-02025f86-ac87-4016-859f-15677a6d3cf7.png” width=”220″ height=”220″ >

装置 & 应用

装置 npm 包

# npm
npm install vuejs-loadmore --save

全局导入

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

Vue.use(VueLoadmore);

国际化反对

反对中文 zh-CN 和英文 en-US, 默认为 zh-CN。

import VueLoadmore from 'vuejs-loadmore';

Vue.use(VueLoadmore, {lang: 'en-US'})

你也能够应用 locale.use() 指定语言。

import VueLoadmore, {locale} from 'vuejs-loadmore';

Vue.use(VueLoadmore);
locale.use('en-US');

用法

根底用法

<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 的数据改为 true，这样就会显示 没有更多了。

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

谬误提醒

<vue-loadmore 
  :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: [],
      finished: false,
      error: false,
    };
  },
  methods: {onLoad() {fetchSomeThing().catch(() => {this.error = true;});
    },
  },
};

API

Props

办法

应用 ref 获取 List 实例并调用实例办法。

例子

查看 demo 以疾速理解如何应用此包。

git clone git@github.com:staticdeng/vuejs-loadmore.git
yarn install
yarn example:dev