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)
    },