頁面滾動scroll到最底部 - 加載更多數據

頁面滾動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來判斷何時顯示即可，該例子中不多寫了~