vue实现上拉加载更多

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