下拉 分页

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

});

},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值