結合Vue 的滾動底部加載

<p>項目手機端分頁跳轉不理想，本身作了一個滾動加載的一個Demo</p> <blockquote><strong>核心Dom結構</strong></blockquote>php

&lt;body&gt;
&lt;div id="Content"&gt;
    &lt;div&gt;
        &lt;ul&gt;
            &lt;li v-for="l in list"&gt;{{l.title}}&lt;/li&gt;
            &lt;li class="loading" v-if="loading"&gt;加載中&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;

<blockquote> ```css

Javascript代碼html

</blockquote>

}
        }
    },

})
//添加滾動事件
window.onload = function () {
    window.addEventListener('scroll', v.handleScroll)
}

//滾動條到底部的距離
function getScrollBottomHeight() {
    return getPageHeight() - getScrollTop() - getWindowHeight();

}
//頁面高度
function getPageHeight() {
    return document.querySelector("html").scrollHeight
}
//滾動條頂 高度
function 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 &gt; 0) ? bodyScrollTop : documentScrollTop;
    return scrollTop;
}
function getWindowHeight() {
    var windowHeight = 0;
    if (document.compatMode == "CSS1Compat") {
        windowHeight = document.documentElement.clientHeight;
    } else {
        windowHeight = document.body.clientHeight;
    }
    return windowHeight;
}

</script>python

<blockquote><strong>實現思路</strong></blockquote>

1.得到滾動條到底部的距離 getScrollBottomHeight() 2.綁定滾動事件handleScroll()，handleScroll()判斷滾動條到底部距離是否小於設置的bottomHight，而且增長一個loading屬性，防止加載時滑動時屢次觸發，形成屢次加載 3.Ajax請求load.php，經過Page去查詢得到當前頁數（page+1）的內容 4.將獲取的內容，push 到 list中，完成後Vue 自動渲染新的列表，loading變爲falsemysql

<blockquote>感謝你閱讀個人文章，若是有錯誤或不足能夠給我評論留言</blockquote>

                
                                                
原文地址：https://segmentfault.com/a/1190000012440716