页面滚动scroll到最底部 - 加载更多数据

上拉内容区域，拉到底部实现分页功能，向后端请求更多数据加载到页面上

vue项目，使用纯js实现，网上显示了不少插件能够实现，我使用了几个，都不是我须要的效果，可能没研究明白，没办法只能原生实现，具体实现思路以下~

思路：经过滚动条判断是否到内容底部  =>  到底部后向后台请求下一页得数据  =>  将请求得新数据拼接在老数据上  

特别：须要判断请求的页数是否为第一页，若是是第一页不要拼接

怎么判断滚动条是否到最底部：
三个关键的点：

1：滚动条距离顶部的距离：document.documentElement.scrollTop||document.body.scrollTop

2：当前窗口内容的可视区域：document.documentElement.clientHeight || document.body.clientHeigh

3：滚动条内容的总高度：document.documentElement.scrollHeight||document.body.scrollHeight

一个关键函数：

一个监听滚动函数：window.addEventListener('scroll',()=>{})

一个断定的等式：滚动条距离顶部 + 窗口可视区域 == 滚动条内容总高度，此时能够断定滚动条已经滚动到最底部

created(){
window.addEventListener('scroll',()=>{
// console.log('滚动条距离顶部'+document.documentElement.scrollTop||document.body.scrollTop);
// console.log('可视区域'+document.documentElement.clientHeight ||document.body.clientHeight);
// console.log('滚动条内容的总高度'+document.documentElement.scrollHeight||document.body.scrollHeight);
let scrollTop = document.documentElement.scrollTop||document.body.scrollTop ;
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight ;
let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight ;
if(scrollTop+clientHeight == scrollHeight){
console.log("到底部了")
this.handleScroll();
}
});
}
handleScroll(){
if(this.button){
setTimeout(()=>{
this.button = false ; //设置一个按钮，是否能够上拉获取数据，写在data中
this.page += 1; //获取下一页的数据
this.getlist(); //向后端获取数据
},500)
}
},
上面代码只是其中部分代码，主要是侧重判断滚动条滚动到最下方

其中还有好多细节，好比样式中还写了，滚动到最下方以后会有一个加载中的图片，和文字

若是全部数据都加载完成后，显示“数据所有加载完成”，这些只须要简单的经过v-if来判断什么时候显示便可，该例子中很少写了~