上拉內容區域，拉到底部實現分頁功能，向后端請求更多數據加載到頁面上
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來判斷何時顯示即可，該例子中不多寫了~