vuejs-loadmore
一个Vue.js 的下拉刷新和上拉加载组件。
通过提供简单的api易于使用。与其他组件库不同，它使用浏览器本身而不是js来作滚动容器，因此它的代码量更小，但不损失用户体验。
中文 | English
预览
也可以扫描以下二维码访问演示：
安装 & 使用
安装 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
| Attribute | Description | Type | Default |
|---|---|---|---|
| on-refresh | 顶部下拉触发 | function | - |
| pulling-text | 下拉显示文本 | string | 下拉刷新 |
| loosing-text | 释放显示文本 | string | 释放刷新 |
| refresh-text | 正在刷新显示文本 | string | 正在刷新 |
| success-text | 刷新完成显示文本 | string | 刷新完成 |
| show-success-text | 是否显示success-text |
boolean | true |
| pull-distance | 触发正在刷新状态的距离 | number | string | 50 |
| head-height | 正在刷新显示区域的高度 | number | string | 50 |
| animation-duration | 下拉刷新动画持续时间 | number | string | 200 |
| on-loadmore | 滚动到底部触发 | function | - |
| immediate-check | 是否立即触发数据加载；默认是，否的话则自己定义触发数据加载时机 | boolean | true |
| load-offset | 当滚动条到底部的距离小于 load-offset 时，会发出 on-loadmore |
number | string | 50 |
| finished | 数据是否加载完毕，改变为true，则会显示finished-text |
boolean | false |
| error | 数据是否加载错误，on-loadmore只有在点击错误文本时才会触发，需要sync修饰符 |
boolean | false |
| loading-text | 滚动到底部正在加载显示文本 | string | 正在加载 |
| finished-text | 滚动到底部加载完毕的显示文本 | string | 没有更多了 |
| error-text | 加载错误显示文本 | string | 请求失败，点击重新加载 |
方法
使用 ref 获取 List 实例并调用实例方法。
| Name | Description |
|---|---|
| checkScroll | 检查当前的滚动位置，若已滚动至底部，则会触发 on-loadmore |
例子
查看demo以快速了解如何使用此包。
git clone [email protected]:staticdeng/vuejs-loadmore.git
yarn install
yarn example:dev