推荐一个Vue移动端上拉加载下拉刷新组件,通过提供简单的api易于使用。
预览
在线demo
也可以扫描以下二维码访问演示:
安装
安装 npm 包
# npmnpm 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 loadedthis.finished = true;}done();},fetch() {for (let i = 0; i < this.pageSize; i++) {this.list.push(this.list.length + 1);}this.page++;}},}