基于Vant框架的下拉刷新和上滑加载

可以先去官网那个看一下  基本要求   然后直接复制粘贴一下代码  基本就能看出猫腻了

<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>
————————————————
版权声明：本文为CSDN博主「R511」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Webghost511/article/details/97135914