<template><div class="sg-page-body"><div class="sg-list"><van-pull-refresh v-model="pullLoading" @refresh="onPullRefresh" success-text="刷新成功"><van-list v-model="listLoading" @load="onLoadList" :finished="finishedList" finished-text="沒有更多了"><van-card v-for="(item,$index) in list" :key="$index">{{item.label}}</van-card></van-list></van-pull-refresh></div></div>
</template><script>export default {data() {return {list: [], //列表數組listLoading: false, //上滑列表加載（每一次上滑的時候）finishedList: false, //上滑列表加載完了所有數據（沒有更多了）pullLoading: false, //下拉刷新加載動畫start: 0, //從第1頁開始limit: 10, //每頁10條數據累加qylx: ""};},methods: {//下拉刷新列表■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■onPullRefresh() {this.list = [];this.start = 0;this.finishedList = false;this.onLoadList();},//上滑加載列表________________________onLoadList() {// 異步更新數據if (this.finishedList) return;var data = {start: this.start,limit: this.limit,qylx: this.qylx};this.$d.API_NAME(data, {success: d => {/*這里寫代碼*/this.list = this.list.concat(d);this.pullLoading = this.listLoading = false; // 加載和下拉狀態結束this.finishedList = d.length === 0; //上滑列表加載完了所有數據（沒有更多了）}});this.start++;}// ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■}};
</script>

?

總結

以上是生活随笔為你收集整理的使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据，下拉刷新当前列表数据（等同于翻页功能）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。