当前位置: 代码迷 >> 综合 >> 使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
  详细解决方案

使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)

热度:23   发布时间:2023-11-27 19:09:26.0
<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>

 

  相关解决方案