100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Vue移动端上拉加载下拉刷新组件

Vue移动端上拉加载下拉刷新组件

时间:2023-04-26 01:01:11

相关推荐

Vue移动端上拉加载下拉刷新组件

推荐一个Vue移动端上拉加载下拉刷新组件,通过提供简单的api易于使用。

预览

在线demo

也可以扫描以下二维码访问演示:

安装

安装 npm 包

# npmnpm 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 loadedthis.finished = true;}done();},fetch() {for (let i = 0; i < this.pageSize; i++) {this.list.push(this.list.length + 1);}this.page++;}},}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。