vue实现上拉加载更多

最新推荐文章于 2024-06-05 07:15:00 发布

cv酱

最新推荐文章于 2024-06-05 07:15:00 发布

阅读量3.6k

点赞数 2

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

本文链接：https://blog.csdn.net/YingUser/article/details/127741295

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

1、在页面底部添加元素

<div ref="loadmore">加载更多</div>

2、逻辑

mounted() {
this.http(this.offset);第一次数据
var timer = null;
//触底加载更多的事件
const winHeight = document.documentElement.clientHeight;
window.addEventListener("scroll", () =>{

获取页面高度的方法

let currentHeight = this.$refs.loadmore.getBoundingClientRect().top;  


}
if (timer) {

clearTimeout(timer);防流节斗

}
timer = setTimeout(() => {

if (winHeight > currentHeight) {


this.http(this.offset), 300)//加载更多的请求数据 参数是条数

}

}

3、请求的数据

细节：条数记得每次加载都要加等于

4、视频链接参考

5.Vue项目-音乐播放器-上拉加载_哔哩哔哩_bilibili