VUE @load事件触发多次分页

最新推荐文章于 2024-06-30 17:33:54 发布

HezhezhiyuLe

最新推荐文章于 2024-06-30 17:33:54 发布

阅读量775

点赞数

分类专栏：前端 vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/hezhezhiyule/article/details/126418711

版权

前端同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

前言

 <van-list v-model="loading" @load="initTodoList" :finished="isLoadFinished" :offset="getListMoreOffset">

写了个瀑布式分页，调用时多次，预期是两次，而且第二次开始，请求参数一致
在这里插入图片描述

原因

参考文章

非加载中，loading为false，此时会根据列表滚动位置判断是否触发onload事件（列表内容不足一屏幕时，会直接触发）
加载中，loading为true，表示正在发送异步请求，此时不会触发onload事件

解决

加载中应该设置为false，其次，达到最大条数时，isLoadFinished要设置为true

     this.loading = true;
            queryMyToDoListByTerm(this.queryParam).then(response => {
                if (response.code === 200) {
                    //自查分页
                    if (this.type == '2') {
                        //关闭
                        this.loading = false;
                        //追加数组
                        this.todoList = this.todoList.concat(response.data.list);
                        if ((this.queryParam.num*10) >= response.data.total) {
                            this.isLoadFinished = true;
                        } else {
                            this.queryParam.num++;
                        }
                        // this.listActive = true;
                        console.log("this.queryParam", this.isLoadFinished, this.queryParam.num,response.data.total )
                    } else {
                        this.todoList = response.data.list;
                        this.isLoadFinished = true;
                    }

                }
            });