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

<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>