这里是基于了Vant-ui框架做的下拉刷新和上拉加载
没有用复杂原生JS来写,用框架非常的方便,一看就会,上手性也非常的强,同样效率也非常的高
废话不多说直接上代码,更多的API可以查看这里!!
下面的代码中我也改了一些参数,不过效果非常的好。
这里只是一些假数据模拟的,也可以用ajax来获取真是数据,效果更炸
<template>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
class="load"
>
<van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
</van-pull-refresh>
</template>
<script>
import Vue from "vue";
import { List, Cell, PullRefresh,Toast } from "vant";
Vue.use(List);
Vue.use(Cell);
Vue.use(PullRefresh);
Vue.use(Toast);
export default {
data() {
return {
list: [],
loading: false,
finished: false,
isLoading: false,
};
},
methods: {
onLoad() {
// 异步更新数据
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
// 加载状态结束
this.loading = false;
// 数据全部加载完成
if (this.list.length >= 50) {
this.finished = true;
}
}, 500);
},
onRefresh() {
setTimeout(() => {
this.$toast('刷新成功');
this.isLoading = false;
this.count++;
}, 500);
}
}
};
</script>
希望对大家有帮助!