使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据，下拉刷新当前列表数据（等同于翻页功能）
原创
©著作权归作者所有：来自51CTO博客作者挚爱的强哥的原创作品，请联系作者获取转载授权，否则将追究法律责任
<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>
