今天,闲来无事就写了一个关于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, bodyScrollHeigh