推荐一个Vue移动端上拉加载下拉刷新组件,通过提供简单的api易于使用。
预览
也可以扫描以下二维码访问演示:
![](https://i-blog.csdnimg.cn/blog_migrate/ff88c3eabe55d2fb72190b1c8f7c3267.png)
安装
安装 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++;
}
},
}