loadmore is a Vue component that makes it easier to implement native mobile app like pull to refresh and pull to load more functionalities in your web applications.
How to use it:
1. Install and import the VueLoadmore component.
import Vue from 'vue'; import VueLoadmore from 'vuejs-loadmore';
2. Register the component.
Vue.use(VueLoadmore);
3. Add the VueLoadmore component to the app.
<vue-loadmore :on-refresh="onRefresh" :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: [],
page: 1,
pageSize: 10,
finished: false,
error: 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++;
}
},
}
4. All available component props.
onRefresh: Function,
pullingText: {
type: String,
default: '下拉刷新'
},
loosingText: {
type: String,
default: '释放刷新'
},
refreshText: {
type: String,
default: '正在刷新'
},
successText: {
type: String,
default: '刷新完成'
},
showSuccessText: {
type: Boolean,
default: true
},
pullDistance: {
type: [Number, String],
default: 50
},
headHeight: {
type: [Number, String],
default: 50
},
animationDuration: {
type: [Number, String],
default: 200
},
// 上拉加载
onLoadmore: Function,
immediateCheck: {
type: Boolean,
default: true
},
loadOffset: {
type: [Number, String],
default: 50
},
finished: Boolean,
error: Boolean,
loadingText: {
type: String,
default: 'Loading'
},
finishedText: {
type: String,
default: 'No more data'
},
errorText: {
type: String,
default: '请求失败，点击重新加载'
}
Preview:
Changelog:
v1.0.8 (11/23/2022)
- Bugfix
v1.0.7 (02/25/2022)
- Update and Optimize
v1.0.5 (01/23/2022)
- Fix problems with finished props
v1.0.4 (01/03/2022)
- Configure rollup packaging to exclude vue
v1.0.3 (01/03/2022)
- Internationalization support: zh-CN and en-US
v1.0.2 (12/29/2021)
- Change the default value of immediate-check to true
v1.0.1 (12/19/2021)
- fix normalizeComponent function dose not get transpiled
Download Details:
Author: staticdeng
Live Demo: https://staticdeng.github.io/vuejs-loadmore/
Download Link: https://github.com/staticdeng/vuejs-loadmore/archive/refs/heads/main.zip
Official Website: https://github.com/staticdeng/vuejs-loadmore
Install & Download:
# NPM
$ npm i vuejs-loadmore