vant 下拉刷新与上拉加载一起使用的问题下拉刷新触发两次 list与pull

最新推荐文章于 2024-07-03 13:45:59 发布

暖光_&

最新推荐文章于 2024-07-03 13:45:59 发布

阅读量4k

点赞数 3

分类专栏： vant vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_40971483/article/details/106637512

版权

vue 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

vant

3 篇文章 0 订阅

订阅专栏

//下拉刷新
 onRefresh() {
                this.list = [];
                this.curPage = 1;
                this.finished = true;
                this.getData();
  },
getData() {
                this.isLoading = false;
                getList({
                    curPage: this.curPage,
                    pageSize: this.pageSize
                }).then((res) => {

                    this.listLoading = false;

                    if (res.code == 200) {
                        this.list = this.list.concat(res.data.list);
                        this.curPage = res.data.nextPage;
                        if (this.list.length >= res.data.total) {
                            this.finished = true;
                        }else {
                            this.finished = false;
                        }
                    }
                })
            },

原因是在于下拉刷新的时候触发了上拉加载，所以执行了两次

解决方法是：先将list组价的finished=true，数据加载完了在判断该值应该是true还是false，这样可以避免在下拉刷新的时候触发上拉加载。