很久沒釋出文章了，但其實一直在學習寫元件，本來想寫個跑馬燈元件，但是因為css動畫會出現卡頓，就算開啟GPU加速還是會，暫時還沒有什麼好的解決方法，所以有解決方法的歡迎指點一下。
我想，工作一段時間的都碰見過上拉載入更多需求，現在這種外掛也蠻多的，也很多是把上拉載入下拉重新整理結合。但是這些元件都有一個問題，就是下拉到最底部，重新整理瀏覽器，瀏覽器會記住這個距離，從而觸發上拉載入的方法。雖然這個小問題在正常情況下沒什麼影響，於是自己就研究研究，寫了一個上拉載入更多的元件。
要寫上拉載入其實還分兩種場景，一種是相對window，也就是相對於可視視窗，一種是在一個容器內。大部分使用場景是相對視窗，所以暫時只寫了一個相對於window的。
上拉載入原理簡單來說就是判斷內容是否到達底部。容器自身的高度加上距離頂部的距離就是現在整個頁面的高度。整個頁面的高度減去可視視窗的高度再減去滾動條移動的距離，當接近0的時候就是到達底部的時候。
明白了這個原理上拉載入就很好實現了。
標籤：
這邊使用了vue的slot插槽。
data：
windowHeight: '',contentOffSetHeight: '',downT: ''
因為可視視窗和距離頂部的距離是不會變的，所以初始化的時候就賦值，downT是監聽滾動防抖用的。
Props：
props: ['up', 'bottomDistance'],
up對應的就是父元件傳遞的到達底部是觸發的方法，'bottomDistance'是可以設定到達底部距離多少的時候觸發載入更多的方法。
Mounted：
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
};
this.windowHeight = document.documentElement.clientHeight || document.body.clientHeight;//可視視窗高度
this.contentOffSetHeight = document.getElementById('scroll').offsetTop;//容器距離頂部高度
window.addEventListener('scroll', this.onScroll);
複製程式碼這邊可視視窗採用了相容的寫法，然後history.scrollRestoration這個可以去了解一下，就是不記住滾動的距離，重新整理的時候就不會直接觸發載入方法。然後監聽window滾動。
onScroll()
{
if (this.downTime) {
clearTimeout(this.downTime);
};
this.downTime = setTimeout(() = > {
let contentHeight = document.getElementById('scroll').clientHeight;//容器高度
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//視窗滾動條高度
if (contentHeight + this.contentOffSetHeight - this.windowHeight - scrollTop <= (this.bottomDistance || 0)) { //載入更多操作
this.$emit('up')
}
}, 200);
}
複製程式碼加上了節流，bottomDistance不穿預設為0，然後節流設定了200毫秒。
最後beforeDestroy：
window.scrollTo(0, 0);window.removeEventListener('scroll', this.onScroll)
重新整理當前頁面或者離開頁面的時候移動到最頂部，防止記住滾動條位置，親測，要是沒有設定history.scrollRestoration，vue生命週期會先移動到頂部然後再移動到記住的位置。其實設定了這個移動到頂部也不需要，這邊為了穩定就加上了。還有就是要移除監聽滾動，我試了，跟定時間計時器一樣，沒有在元件銷燬的時候移除，會一直存在。
要說的是，這邊沒有寫載入更多的動畫效果，使用的時候可以自定義一個然後隱藏，在觸發載入更多的時候顯示，載入完之後隱藏，包括已經到底部，都可以自定義。雖然會稍顯麻煩，主要是考慮到我寫的估計很多人會不喜歡。
這樣看會比較不直觀，所以推薦去npm下載一下：
歡迎關注Coding個人筆記 公眾號