Vue如何优雅地实现下拉到底部自动加载（无限滚动）

首先在目录下新建一个utils文件夹，在该文件夹下新建一个screen.js，将公用方法写入，你也可以考虑其他的封装方式。

//滚动条在Y轴上的滚动距离
export function 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;
}



//文档的总高度
export function getScrollHeight(){
  var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
  if(document.body){
    bodyScrollHeight = document.body.scrollHeight;
  }
  if(document.documentElement){
    documentScrollHeight = document.documentElement.scrollHeight;
  }
  scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
  return scrollHeight;
}



//浏览器视口的高度
export function getWindowHeight(){
  var windowHeight = 0;
  if(document.compatMode == "CSS1Compat"){
    windowHeight = document.documentElement.clientHeight;
  }else{
    windowHeight = document.body.clientHeight;
  }
  return windowHeight;
}

在要使用的页面中进行引入

  import {getScrollHeight,getScrollTop,getWindowHeight} from "../../utils/screen";

将窗口的滚动进行监听，划到底部的时候就进行加载，但是页面关闭的同时，记得将这个监听器关闭，节省性能

mounted(){
    window.addEventListener('scroll', this.load);
},
destroyed(){
    window.removeEventListener('scroll', this.load, false);
},

this.load()就是写的加载数据的方法，到底部的时候先判断下一页是否还有数据，pages就是我从后台拿到的总页数，和当前页进行对比，只有下一页还有数据的时候，我才会拉取后台的接口。

//无限滚动加载
load(){
    let vm=this;
    if(getScrollTop() + getWindowHeight() >= getScrollHeight()){
        if(vm.queryList.pageNum<vm.pages){      //先判断下一页是否有数据  
            vm.queryList.pageNum+=1;         //查询条件的页码+1
            vm.getList();              //拉取接口数据
        }else{
            //到底了
        }
    }
},

同样地，拉取接口的时候要先判断是否是第一页，第一页的话直接赋值即可，不是第一页的内容，就要考虑将后面的内容和第一页进行拼合

if(this.queryList.pageNum===1){         //第一页就直接赋值   
    this.pages=res.data.result.pages;     //将后台的总页数赋值   
    this.dataList=res.data.result.list;
}else{                         //将后面页码的数据和之前的数据拼合
    for(let i in res.data.result.list){            
        this.dataList.push(res.data.result.list[i]);
    }
}