小編最近在實現移動端列表頁面顯示的時候一直在思考如何實現列表的自動更新數據，對于大多數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中對該方法進行調用：

這樣，一個基本的下拉刷新和滾動刷新的指令也就實現了.

以上所述是小編給大家介紹的基于vue的下拉刷新指令和滾動刷新指令，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！