頁面滾動scroll到最底部 - 載入更多資料

上拉內容區域，拉到底部實現分頁功能，向後端請求更多資料載入到頁面上

vue專案，使用純js實現，網上顯示了很多外掛可以實現，我使用了幾個，都不是我需要的效果，可能沒研究明白，沒辦法只能原生實現，具體實現思路如下~

思路：通過滾動條判斷是否到內容底部  =>  到底部後向後臺請求下一頁得資料  =>  將請求得新資料拼接在老資料上  

特別：需要判斷請求的頁數是否為第一頁，如果是第一頁不要拼接

怎麼判斷滾動條是否到最底部：

三個關鍵的點：

1：滾動條距離頂部的距離：document.documentElement.scrollTop||document.body.scrollTop

2：當前視窗內容的可視區域：document.documentElement.clientHeight || document.body.clientHeigh

3：滾動條內容的總高度：document.documentElement.scrollHeight||document.body.scrollHeight

一個關鍵函式：

一個監聽滾動函式：window.addEventListener('scroll',()=>{})

一個判定的等式：滾動條距離頂部 + 視窗可視區域 == 滾動條內容總高度，此時可以判定滾動條已經滾動到最底部

created(){
    window.addEventListener('scroll',()=>{
        // console.log('滾動條距離頂部'+document.documentElement.scrollTop||document.body.scrollTop);
        // console.log('可視區域'+document.documentElement.clientHeight ||document.body.clientHeight);
        // console.log('滾動條內容的總高度'+document.documentElement.scrollHeight||document.body.scrollHeight);
        let scrollTop = document.documentElement.scrollTop||document.body.scrollTop ;
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight ;
        let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight ;
        if(scrollTop+clientHeight == scrollHeight){
            console.log("到底部了")
            this.handleScroll();
        }	
    });
}
 

handleScroll(){
    if(this.button){
        setTimeout(()=>{
            this.button = false ;  //設定一個按鈕，是否可以上拉獲取資料，寫在data中
            this.page += 1;        //獲取下一頁的資料
            this.getlist();        //向後端獲取資料
        },500)
    }
},

上面程式碼只是其中部分程式碼，主要是側重判斷滾動條滾動到最下方

其中還有好多細節，比如樣式中還寫了，滾動到最下方之後會有一個載入中的圖片，和文字

如果所有資料都載入完成後，顯示“資料全部載入完成”，這些只需要簡單的通過v-if來判斷何時顯示即可，該例子中不多寫了~