首先需要明確3個定義：
文件高度：整個頁面的高度
可視視窗高度：你看到的瀏覽器可視螢幕高度
滾動條滾動高度: 滾動條下滑過的高度
當 文件高度 = 可視視窗高度 + 滾動條高度 時,滾動條正好到底。
首先在mounted中新增監聽：window.addEventListener('scroll', this.scrollFn); // 監聽scroll
然後建立3個函式分別獲取文件高度、可視視窗高度、滾動條高度：
//文件高度
getScrollTop(){
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if(document.body){
bodyScrollTop = document.body.scrollTop;
}
if(document.documentElement){
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
}
//可視視窗高度
getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat"){
windowHeight = document.documentElement.clientHeight;
}
else{
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
//滾動條高度
getScrollHeight(){
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if(document.body){
bodyScrollHeight = document.body.scrollHeight;
}
if(document.documentElement){
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
}
然後在scrollFn函式中判斷:
scrollFn(){
if(this.getScrollTop() + this.getWindowHeight() == this.getScrollHeight()){
這裡執行動態獲取資料的函式
}
}
最後記得銷燬監聽：
destroyed() {
window.removeEventListener('scroll', this.scrollFn); // 銷燬監聽
}
如此即可實現滑動載入更多。