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

最新推荐文章于 2024-11-20 11:17:52 发布

原创

最新推荐文章于 2024-11-20 11:17:52 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

本文介绍了如何在Vue项目中实现滚动到底部自动加载更多数据的功能。关键在于获取scrollTop、clientHeight和scrollHeight，并在handleScroll方法中判断滚动条件，当滚动到页面底部时，模拟加载数据。通过监听scroll事件并在满足条件时触发数据更新，达到无限滚动的效果。

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