vue页面滚动条分页加载数据

mounted() {
    //监听页面滚动事件
    window.addEventListener("scroll", this.handleScroll);
  }
  
//methods里面的方法
handleScroll() {
    //窗口滚要做的操作写这里
    let sh = document.documentElement.scrollHeight || document.body.scrollHeight; // 滚动条高度
    let st = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条距离顶部的距离
    let ch = document.documentElement.clientHeight || document.body.clientHeight; // 滚动条外容器的高度
    if (st + ch >= sh-20) {
       //快到底时----加载
       if(this.total && this.list.length<this.total){
         this.currentPage++
         this.reloadList(); // 加载数据的方法 
       }
     }
 },
 reloadList(){
 }

1.需要判断滚动条是否到底部：

需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。

从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == s