原理:

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

Logo

前往低代码交流专区

更多推荐