下面介绍一款vue移动端下拉刷新和上拉加载组件,体积小运行快,使用起来很简单。
一个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');
用法
基础用法
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++;
}
},
}
错误提示
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 | 释放刷新 |
|
loading-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 | 是否在mounted之后立即检查 | 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