很久沒發布文章了，但其實一直在學習寫元件，本來想寫個跑馬燈元件，但是因為css動畫會出現卡頓，就算開啟gpu加速還是會，暫時還沒有什麼好的解決方法，所以有解決方法的歡迎指點一下。
我想，工作一段時間的都碰見過上拉載入更多需求，現在這種外掛程式也蠻多的，也很多是把上拉載入下拉重新整理結合。但是這些元件都有乙個問題，就是下拉到最底部，重新整理瀏覽器，瀏覽器會記住這個距離，從而觸發上拉載入的方法。雖然這個小問題在正常情況下沒什麼影響，於是自己就研究研究，寫了乙個上拉載入更多的元件。
要寫上拉載入其實還分兩種場景，一種是相對window，也就是相對於可視視窗，一種是在乙個容器內。大部分使用場景是相對視窗，所以暫時只寫了乙個相對於window的。
上拉載入原理簡單來說就是判斷內容是否到達底部。容器自身的高度加上距離頂部的距離就是現在整個頁面的高度。整個頁面的高度減去可視視窗的高度再減去滾動條移動的距離，當接近0的時候就是到達底部的時候。
明白了這個原理上拉載入就很好實現了。
標籤：這邊使用了vue的slot插槽。
data：
windowheight: 『』,contentoffsetheight: 『』,downt: 『』
因為可視視窗和距離頂部的距離是不會變的，所以初始化的時候就賦值，downt是監聽滾動防抖用的。
props：
props: [『up』, 『bottomdistance』],
up對應的就是父元件傳遞的到達底部是觸發的方法，'bottomdistance』是可以設定到達底部距離多少的時候觸發載入更多的方法。
mounted：
if (history.scrollrestoration) ;
this.windowheight = document.documentelement.clientheight || document.body.clientheight;//可視視窗高度
this.contentoffsetheight = document.getelementbyid('scroll').offsettop;//容器距離頂部高度
window.addeventlistener('scroll', this.onscroll);
onscroll()
;this.downtime = settimeout(() = >
}, 200);
}
最後beforedestroy：
window.scrollto(0, 0);window.removeeventlistener(『scroll』, this.onscroll)
重新整理當前頁面或者離開頁面的時候移動到最頂部，防止記住滾動條位置，親測，要是沒有設定history.scrollrestoration，vue生命週期會先移動到頂部然後再移動到記住的位置。其實設定了這個移動到頂部也不需要，這邊為了穩定就加上了。還有就是要移除監聽滾動，我試了，跟定時間計時器一樣，沒有在元件銷毀的時候移除，會一直存在。
要說的是，這邊沒有寫載入更多的動畫效果，使用的時候可以自定義乙個然後隱藏，在觸發載入更多的時候顯示，載入完之後隱藏，包括已經到底部，都可以自定義。雖然會稍顯麻煩，主要是考慮到我寫的估計很多人會不喜歡。
上拉載入更多
在ios開中中，由於螢幕尺寸限制，如果需要顯示的資料很多，需要用到分頁載入。資料來源是個array nsmutablearray items viewcontroller的這個方法返回資料條數 1是為了顯示 載入更多 的那個cell nsinteger tableview uitableview t...
js上拉載入更多
方法一 jq var page 1,分頁碼 off on false,分頁開關 滾動載入方法 1 中用的 timers null 定時器 滾動載入方法 2 中用的 載入資料 var loadingdatafn function off on true 重要 這是使用了 時 用到的 如果用 滾動載入方...
js上拉載入更多
jq方法 方法一 var page 1,分頁碼 off on false,分頁開關 滾動載入方法 1 中用的 timers null 定時器 滾動載入方法 2 中用的 載入資料 var loadingdatafn function off on true 重要 這是使用了 時 用到的 如果用 滾動載...