下拉分页

最新推荐文章于 2023-11-08 16:57:39 发布

inmarry

最新推荐文章于 2023-11-08 16:57:39 发布

阅读量203

点赞数

CC 4.0 BY-SA版权

分类专栏：小工具文章标签： js

本文链接：https://blog.youkuaiyun.com/inmarry/article/details/88657872

小工具专栏收录该内容

5 篇文章

订阅专栏

1、先在data里面定义变量

allLIst 表示请求接口收到的数据；

loadNextPage 表示是否进入下一页；

2、在mounted里面监听分页滚动条

//分页监听滚动条

window.addEventListener("scroll", this.handleScroll);

3、在methods里面写handleScroll方法

//分页——滚动条触碰到底部
            handleScroll() {
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//判断 如果文档的距离减200小于  屏幕可视距离  加上  滚动条距离顶部的距离，并且 loadNextPage为true ，则page++；
                if (document.documentElement.scrollHeight - 200 < document.documentElement.clientHeight + scrollTop) {
                    if (this.loadNextPage) {
// console.log("下一页");
                        this.loadNextPage = false;
                        this.page++;
                        this.getArticle();
                    }
                }
            },

4、请求数据列表之后给变量list赋值

其中 allList 为存起来的数据数组。

//请求数据列表

getArticle() {

let obj = {

page: this.page,

size: 10

};

this.$http.post("/api/total/list", obj).then(res => {

//分页进入下一页

let data = res.data.result.data;

//判断如果数据个数小于10，不进入下一页，否则loadNextPage设为true进入下一页

data.length < 10 ? this.loadNextPage = false : this.loadNextPage = true;

//分页连接数组

this.allList = [...this.allList, ...data];

// console.log(JSON.stringify(this.allList));

});

},