基於vue的下拉重新整理&滾動重新整理指令
小編最近在實現移動端列表頁面顯示的時候一直在思考如何實現列表的自動更新資料，對於大多數Native App或者Web App，在列表的底部增加“載入更多”的按鈕也是解決這樣的問題一種互動的方式，當然，這樣的互動其實還好，不過根據使用者的操作習慣來看，似乎滾動重新整理更多資料和下拉重新整理當前資料的操作方式，更符合使用者對列表分頁資料的讀取習慣，因此，在這裡小編想簡單的說說，這次在小編系統中所使用的下拉重新整理和滾動重新整理的實現方式！
其實，這種實現資料載入的原理很簡單
在滾動重新整理的時候，需要在列表滾動到底部的時候，觸發相應的回撥函式，激發載入更多資料
在下拉重新整理的時候，通過判斷列表的使用者手指離開的時候的偏移量，觸發相應的回撥函式，激發資料重新整理
當然，在這裡，為什麼下拉列表的時候是激發資料重新整理，在列表滾動到底部的時候激發載入更多資料，這既算是互動上的一種優化，也是一種使用者習慣的約定俗成，一般使用者在滾動列表的時候，希望的是看到更多的資料；當用戶試圖看到已經載入的資料的新的狀態時，使用者會偏向於下拉重新整理這個列表，這在Native App亦或是Web app中都是大同小異的。
當然，這些都不過是js懶載入技術的不同實現方式。
那麼，我們先來看下實現之後的效果，這也是小編目前在做的一款移動端的產品
首先，我們先看下，列表的滾動重新整理，那麼到底如何去判斷列表已經滾動到了底部呢？
我們先看一個圖，瞭解一些基本概念：
這裡小編只列舉了我們常用的介面高度和寬度元素，這其中：
clientHeight
內容可視區域的高度，也就是說頁面瀏覽器可以看到內容的這個區域的高度，但要注意padding是算在內的
offsetHeight
在IE6，IE7，IE8以及最新的的FF, Chrome中，在元素上都是offsetHeight = clientHeight + 滾動條 + 邊框
scrollHeight
這個屬性就比較麻煩了,因為它們在火狐跟IE下簡直差太多了..
在火狐下還很好理解,它其實就是滾動條可滾動的部分還要加上border的高度還要加上橫向滾動條不可用的高度,與clientHeight比起來,多個border的高度跟橫向滾動條不可用的高度.
在IE中 scrollHeight確是指這個物件它所包含的物件的高度加上boder的高度和marging,如果它裡面沒有包含物件或者這個物件的高度值未設定,那麼它的值將為15
那麼，在這裡，我們會發現，當scrollTop + offsetHeight >= scrollHeight的時候，其實，我們的滾動條就已經到達最底部了
各個高度元素的方法有了，接下來，我們需要有一個方法去檢查頁面額滾動條是否已經到達了底部，那麼，其實就是執行這個公式的計算邏輯
那，這裡的loadDownFn就是我們的滾動重新整理的方法，這個方法也是通過指令的方式傳遞到這個元件之中的，這點在接下來也會提到。
既然有了檢查滾動條滾動位置的方法，那如何才能夠激發這個方法在使用者滾動列表的時候執行呢，那麼，我們需要在列表滾動的時候，去激發檢查方法的執行，其實這裡就是對列表的scroll事件綁定了監聽器。
那麼，在這裡，throttle是個限速器，防止滾動條滑懂到底部時多次激發重新整理函式
因此我們的滾動重新整理也就完成了，其實回頭看看，畢竟JS實現的程式碼會有一些回撥方法在裡面，影響了我們通常的線性思維，但是我們可以發現，思路還是很清晰的，那接下來，我們看下下拉重新整理的是如何實現的。
其實下拉重新整理的觸發邏輯也是很簡單的，說白了，就是在使用者手指接觸螢幕的時候，捕獲一下列表所在div的一個高度座標，在使用者手指脫離螢幕的時候再捕獲一下列表所在div的一個高度座標，做個差值判斷一下使用者的執行的動作是否是摁住該div的一個拉動動作（注意：不是滾動動作哦），從而判斷是否應該激發我們的資料重新整理方法。
那在這裡，我們捕獲使用者的觸屏操作，需要利用到H5的touch事件，這裡，我們再翻開教科書看下，H5的touch事件都指的是什麼？
觸控事件(touch)會在使用者手指放在螢幕上面的時候、在螢幕上滑動的時候或者是從螢幕上移開的時候觸發，這其中包括以下幾個事件：
(on)touchstart：觸控開始的時候觸發
(on)touchmove：手指在螢幕上滑動的時候觸發
(on)touchend：觸控結束的時候觸發
(on)touchcancel：系統取消touch事件的時候觸發。例如電話接入或者彈出資訊。一般用在遊戲：玩著的時候，突然來電話了，就觸發touchcancel事件暫停遊戲、存檔等操作。
那，在這裡，小編主要用到了touchstart,touchmove和touchend這三個事件，分別用來捕獲使用者的觸屏行為：
在touchmove裡面，大家要注意，由於微信中的webview會存在黑底的問題，因此我們拉動列表的時候，會出現露出微信上方黑底的問題，因此，我們需要呼叫preventDefault方法，防止事件繼續向上冒泡，從而防止使用者在拖動列表的時候，微信上方出現黑底，那樣會十分影響體驗。
那接下來，我們需要做的就是把這些觸控事件繫結到滾動條上就行了：
那麼，我們的下拉重新整理的主要邏輯也就完成了
當然這裡，我們也需要提供靈活的方式，能夠動態的去繫結和解綁下拉重新整理和滾動重新整理的方法
最後，因為我們的控制元件沒辦法知道我們的資料已經載入完，因此我們需要提供一個方法，由外部的資料重新整理方法呼叫結束後，通知我們的元件，資料已經載入完，並且重新渲染下拉處或者底部處的樣式：
我們在元件中，也建議在vue的nextClick中對該方法進行呼叫：
這樣，一個基本的下拉重新整理和滾動重新整理的指令也就實現了
以上內容，大神們不免會有嫌棄，畢竟僅僅是淺談筆者目前專案中開發用到的一點點技術和筆者自己一點點的積累，有啥問題也請大神們指點指點，畢竟筆者也還是個孩子，孩子的郵箱還是那個郵箱：
[email protected]
最後坦白來說，想寫的東西有很多，想研究的東西有很多，想說的廢話也有很多，嘿嘿，不過畢竟細水長流嘛，筆者也會繼續默默的學習，默默的更新部落格，儘管路不好走，但還得走啊！
