Vue滚动底部 加载更多的功能说明

今天，闲来无事就写了一个关于Vue滚动底部加载更多的功能，话不多说，直接上代码！##先声明我自己使用cli3写的

做这个功能最主要的就是获取3个值 scrollTop，clientHeight，scrollHeight 之后判断3值之间的关系效果自然就出来了

  scrollTop为滚动条在Y轴上的滚动距离。        
  clientHeight为内容可视区域的高度。        
  scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。  

我在Methods中写了3个获取上面这些值的方法

getScrollTop(){
　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
　　if(document.body){
　　　　bodyScrollTop = document.body.scrollTop;
　　}
　　if(document.documentElement){
　　　　documentScrollTop = document.documentElement.scrollTop;
　　}
　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
　　return scrollTop;
},
//文档的总高度
getScrollHeight(){
　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
　　if(document.body){
　　　　bodyScrollHeight = document.body.scrollHeight;
　　}
　　if(document.documentElement){
　　　　documentScrollHeight = document.documentElement.scrollHeight;
　　}
　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
　　return scrollHeight;
},
getWindowHeight(){
　　var windowHeight = 0;
　　if(document.compatMode == “CSS1Compat”){
　　　　windowHeight = document.documentElement.clientHeight;
　　}else{
　　　　windowHeight = document.body.clientHeight;
　　}
　　return windowHeight;
}

当然你也可以写一个工具类封装这些函数

之后在mounted中写下面的方法出发scroll事件

window.addEventListener(‘scroll’, this.handleScroll)

最后要做的就是写handleScroll这个方法了，滚动到底部要干什么

handleScroll(){
if(this.getScrollTop() + this.getWindowHeight() >= this.getScrollHeight()){
for(var i = 0; i <10; i++) {
this.data.push(this.data[this.data.length-1]+1);
}
console.log(this.data)
}

如果想看到明显的效果可以给它设置一个定时器

handleScroll(){
if(this.getScrollTop() + this.getWindowHeight() >= this.getScrollHeight()){
setTimeout(() => {
for(var i = 0; i <10; i++) {
this.data.push(this.data[this.data.length-1]+1); //我data中的数据是1-10的数组 每次拉到底部就加10条数据 10=>20=>30
}
}, 2000)
console.log(this.data)
}

template中随便写点

//这里写循环的内容

最后的效果就是每次拉到底部 就多出10条数据