vue的vant上拉加载

最新推荐文章于 2025-04-24 17:46:29 发布

加班阳

最新推荐文章于 2025-04-24 17:46:29 发布

阅读量499

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_50952645/article/details/130778835

版权

这段代码涉及数据对象`data`的定义，包含表格数据、分页参数、加载状态等属性。当从后端获取数据成功且code为1时，遍历并添加到tableList，若数据不足10条则标记加载完毕。onLoad函数中，页码递增并调用获取信息的方法，实现上拉刷新功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在data里面写写下这些属性

data: {
            tableList: [],
            //  传递给后端的参数
            PayData: {
                // 请求第几页
                pageNumber: 1,
                // 请求每页的数量
                // pagSize: 5,
            },
            // 列表数据
            tableList: [],
            // 用于上拉刷新加载时合并的数据
            newTableList: [],
            // 总页数
            total: 0,
            // 加载状态
            finished: false,
            // 上拉加载
            loading: false,
        },

                    if (data.code = 1) {
                        console.log(data);
                        if (data.shoprecharge) {
                            data.shoprecharge.forEach(item => {
                                this.tableList.push(item);
                            });
                            if (data.shoprecharge.length < 10) {
                                this.finished = true;
                            }

                        } else {
                            this.finished = true;
                            this.loading = false;
                        }
                    } else {
                        this.finished = true;
                    }

在最后调用一次

            // 上拉刷新
            onLoad() {
                // 加载时页码递增
                this.PayData.pageNumber++
                this.getInfo();
            },