Vue中实现下拉加载

代码如下，使用时复制就完事了

## 下拉加载
created(){
    // 页面创建后先请求一次数据
    this.getDataList();
  },
  mounted(){
    // 监听页面滚动
    window.onscroll=this.pageScroll;
  },
 methods:{
     //请求数据方法
   getDataList(){
     axios.get(`请求路径`).then((res)=>{
      // console.log(res);
      // 使用扩展运算符将新获取的数据添加至原数组
      this.原数据=[...this.原数据,...res.请求到的数据];
    })
   },
  //  页面滚动事件  常做下拉加载内容
  pageScroll(){
    // 获取滚动的距离
    let scrollTop=document.documentElement.scrollTop;
    // 获取滚动的高度（获取整个html的高度）
    let scrollHeight=document.documentElement.scrollHeight;
    // 获取屏幕(浏览器)高度
    let clienHeight=document.documentElement.clientHeight;
    // 滚动的距离 + 屏幕高度 - 内容高度 >= 0 表示滚动到底部了      (下拉加载判断条件)
    if(scrollTop+clienHeight-scrollHeight >=0){
      console.log("我到底了");
      this.offset++;
      //滚动至底部后请求数据
      this.getDataList();
    }
  }
 }
 ##