js滑动下拉加载更多

前言：前些天在做vue项目的时候，用到了一个滑动插件，better-scroll，但是插件有好就有坏，用的不好，反而会使事情变的更复杂，由于我写的是vue项目，那我下面就当做是在vue项目中写。

1、首先在methods中写个函数，获取相关信息

  scrollMoreData() {
            // 计算 总页数
            this.pageTotal = Math.ceil(this.total / this.goodsParams.pagesize);
            const scrollTopHeight = document.documentElement.scrollTop;         //  获取 文档向上滚动的 距离;
            const clientHeight = document.documentElement.clientHeight;         // 获取浏览器窗口的 高度;
            const offsetHeight = document.querySelector(".goods_list_wrap").offsetHeight;   // 获取滚动 内容的 高度;
             if ((scrollTopHeight + clientHeight) - 54 >= offsetHeight) {
                 // -54 是因为顶部的 搜索框占了 54px;  
                 if(this.goodsParams.pagenum>=this.pageTotal){
                     return this.$toast("没有更多数据了")
                 }
                this.getGoodsListData();
          }
        //   console.log(this.pageTotal)
          console.log(this.total)
     },

2、然后在页面加载后的mounted生命周期函数中调用

 mounted() {
 		// goods_list是获取到的当前的组件
        let goods_list = document.querySelector('.goods_list')
        document.addEventListener('scroll', this.scrollMoreData, false)
        // console.log(document.querySelector(".goods_list_wrap").offsetHeight)
    },