可以先去官網那個看一下 基本要求 然后直接復制粘貼一下代碼 基本就能看出貓膩了
<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