vue实现滚动条加载更多数据

Myth丶恋晨 2022-04-06 05:56 480阅读 0赞

# 原理： #

1、参考线位置lineHeight：即判断滚动到何处触发事件；   
2、页面卷入的高度scrollHeight；   
3、浏览器窗口的高度windowHeight。

当页面首次登录的时候已经加载第一页数据，记录第一页数据参考线的高度firstPageH，计算每页增加数据的高度pageH，当增加第N页数据时参考线的高度位置: lineHeight=firstPageH+pageH\*N;

--------------------

# 代码： #

created(){
        var _this=this;
        $(window).scroll(function(){
          var lineHeight=700+930*_this.pageSN;  //默认第一页时 _this.pageSN=1；
          var windowHeight=$(window).height();
          var scrollTop=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
          if(scrollTop+windowHeight>=lineHeight){
            _this.pageSN++;   
            _this.goPage(_this.pageSN); // 执行增加页面数据操作
          } 
        });
      }

--------------------

## 页面常见高度、宽度相关计算 ##

网页可见区域宽： document.body.clientWidth   
网页可见区域高： document.body.clientHeight   
网页可见区域宽： document.body.offsetWidth (包括边线的宽)   
网页可见区域高： document.body.offsetHeight (包括边线的高)   
网页正文全文宽： document.body.scrollWidth   
网页正文全文高： document.body.scrollHeight   
网页被卷去的高： document.body.scrollTop   
网页被卷去的左： document.body.scrollLeft   
网页正文部分上： window.screenTop   
网页正文部分左： window.screenLeft   
屏幕分辨率的高： window.screen.height   
屏幕分辨率的宽： window.screen.width   
屏幕可用工作区高度： window.screen.availHeight   
屏幕可用工作区宽度： window.screen.availWidth

//jQuery函数   
(window).height();//浏览器当前窗口可视区域高度(window).height();//浏览器当前窗口可视区域高度(document).height(); //浏览器当前窗口文档的高度   
(document.body).height();//浏览器当前窗口文档body的高度(document.body).height();//浏览器当前窗口文档body的高度(document.body).outerHeight(true)　//浏览器当前窗口文档body的总高度 包括border padding margin   
(window).width()　//浏览器当前窗口可视区域的宽度(window).width()　//浏览器当前窗口可视区域的宽度(document).width()//浏览器当前窗口文档的宽度   
(document.body).width()　　　　　　//浏览器时下窗口文档body的高度(document.body).width()　　　　　　//浏览器时下窗口文档body的高度(document.body).outerWidth(true)　//浏览器时下窗口文档body的总宽度 包括border padding

--------------------

[https://blog.csdn.net/shengmeshi/article/details/77948248][https_blog.csdn.net_shengmeshi_article_details_77948248]

[https_blog.csdn.net_shengmeshi_article_details_77948248]: https://blog.csdn.net/shengmeshi/article/details/77948248