上拉内容区域，拉到底部实现分页功能，向后端请求更多数据加载到页面上
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来判断何时显示即可，该例子中不多写了~