vue移动端下拉刷新和上拉加载组件，体积小运行快前端vue.js

下面介绍一款vue移动端下拉刷新和上拉加载组件，体积小运行快，使用起来很简单。
一个Vue.js 的下拉刷新和上拉加载组件。
通过提供简单的api易于使用。与其他组件库不同，它使用浏览器本身而不是js来作滚动容器，因此它的代码量更小，但不损失用户体验。
中文 | English
预览在线demo
也可以扫描以下二维码访问演示：

文章图片

安装 & 使用安装 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	`请求失败，点击重新加载`