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)
    },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章