vue中如何优雅地自己写无限滚动

一般移动端的分页就是下划到底部的时候，进行接口的请求，然后请求第二页的数据，将第二页的内容和第一页进行拼接。

首先，在根目录的src文件夹下新建一个utils文件夹，一般这个文件夹下用于存放公用的方法，新建一个common.js，写入以下内容,export是将方法抛出，这样子相当于这三个方法随调随用，增加程序的解耦性

//滚动条在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/function";

接下来，在mounted生命周期中进行window.onscroll的事件监听，当滚动的时候就判断是否到底部，到底部就自动加载数据，切记不能写在created中，因为在created生命周期中还没有window这个对象。

    mounted(){
      let vm=this;
      window.onscroll = function(){
        if(getScrollTop() + getWindowHeight() == getScrollHeight()){   //此时滚动条已经下拉到底部啦
            vm.getList();    //拉取数据的方法
        }
      };
    },

当然，在接口的调用中也要判断是否是第一页，如果不是第一页，不能覆盖当前的list数组，需要进行拼接，这样子就可以完成接口的无限滚动啦。

if(this.pageNum===1){
  this.list=res.data.result.list;
}else{
  for(let i in res.data.result.list){
  this.list.push(res.data.result.list[i]);
  }
}