小編最近在實現(xiàn)移動端列表頁面顯示的時候一直在思考如何實現(xiàn)列表的自動更新數(shù)據(jù)，對于大多數(shù)Native App或者Web App，在列表的底部增加“加載更多”的按鈕也是解決這樣的問題一種交互的方式，當然，這樣的交互其實還好，不過根據(jù)用戶的操作習慣來看，似乎滾動刷新更多數(shù)據(jù)和下拉刷新當前數(shù)據(jù)的操作方式，更符合用戶對列表分頁數(shù)據(jù)的讀取習慣，因此，在這里小編想簡單的說說，這次在小編系統(tǒng)中所使用的下拉刷新和滾動刷新的實現(xiàn)方式！

其實，這種實現(xiàn)數(shù)據(jù)加載的原理很簡單

在滾動刷新的時候，需要在列表滾動到底部的時候，觸發(fā)相應的回調(diào)函數(shù)，激發(fā)加載更多數(shù)據(jù)

在下拉刷新的時候，通過判斷列表的用戶手指離開的時候的偏移量，觸發(fā)相應的回調(diào)函數(shù)，激發(fā)數(shù)據(jù)刷新

當然，在這里，為什么下拉列表的時候是激發(fā)數(shù)據(jù)刷新，在列表滾動到底部的時候激發(fā)加載更多數(shù)據(jù)，這既算是交互上的一種優(yōu)化，也是一種用戶習慣的約定俗成，一般用戶在滾動列表的時候，希望的是看到更多的數(shù)據(jù)；當用戶試圖看到已經(jīng)加載的數(shù)據(jù)的新的狀態(tài)時，用戶會偏向于下拉刷新這個列表，這在Native App亦或是Web app中都是大同小異的。

當然，這些都不過是js懶加載技術的不同實現(xiàn)方式。

那么，我們先來看下實現(xiàn)之后的效果，這也是小編目前在做的一款移動端的產(chǎn)品

首先，我們先看下，列表的滾動刷新，那么到底如何去判斷列表已經(jīng)滾動到了底部呢？

我們先看一個圖，了解一些基本概念：

這里小編只列舉了我們常用的界面高度和寬度元素，這其中：

clientHeight

內(nèi)容可視區(qū)域的高度，也就是說頁面瀏覽器可以看到內(nèi)容的這個區(qū)域的高度，但要注意padding是算在內(nèi)的

offsetHeight

在IE6，IE7，IE8以及最新的的FF, Chrome中，在元素上都是offsetHeight = clientHeight + 滾動條 + 邊框

scrollHeight

這個屬性就比較麻煩了,因為它們在火狐跟IE下簡直差太多了..

在火狐下還很好理解,它其實就是滾動條可滾動的部分還要加上border的高度還要加上橫向滾動條不可用的高度,與clientHeight比起來,多個border的高度跟橫向滾動條不可用的高度.

在IE中 scrollHeight確是指這個對象它所包含的對象的高度加上boder的高度和marging,如果它里面沒有包含對象或者這個對象的高度值未設置,那么它的值將為15

那么，在這里，我們會發(fā)現(xiàn)，當scrollTop + offsetHeight >= scrollHeight的時候，其實，我們的滾動條就已經(jīng)到達最底部了，那么，滾動刷新觸發(fā)的邏輯也就出來了，那么，這里會需要這樣幾個方法，來獲取不同的高度元素

各個高度元素的方法有了，接下來，我們需要有一個方法去檢查頁面額滾動條是否已經(jīng)到達了底部，那么，其實就是執(zhí)行這個公式的計算邏輯

那，這里的loadDownFn就是我們的滾動刷新的方法，這個方法也是通過指令的方式傳遞到這個組件之中的，這點在接下來也會提到。

既然有了檢查滾動條滾動位置的方法，那如何才能夠激發(fā)這個方法在用戶滾動列表的時候執(zhí)行呢，那么，我們需要在列表滾動的時候，去激發(fā)檢查方法的執(zhí)行，其實這里就是對列表的scroll事件綁定了監(jiān)聽器。

那么，在這里，throttle是個限速器，防止?jié)L動條滑懂到底部時多次激發(fā)刷新函數(shù)

因此我們的滾動刷新也就完成了，其實回頭看看，畢竟JS實現(xiàn)的代碼會有一些回調(diào)方法在里面，影響了我們通常的線性思維，但是我們可以發(fā)現(xiàn)，思路還是很清晰的，那接下來，我們看下下拉刷新的是如何實現(xiàn)的。

其實下拉刷新的觸發(fā)邏輯也是很簡單的，說白了，就是在用戶手指接觸屏幕的時候，捕獲一下列表所在div的一個高度坐標，在用戶手指脫離屏幕的時候再捕獲一下列表所在div的一個高度坐標，做個差值判斷一下用戶的執(zhí)行的動作是否是摁住該div的一個拉動動作（注意：不是滾動動作哦），從而判斷是否應該激發(fā)我們的數(shù)據(jù)刷新方法。

那在這里，我們捕獲用戶的觸屏操作，需要利用到H5的touch事件，這里，我們再翻開教科書看下，H5的touch事件都指的是什么？

觸摸事件(touch)會在用戶手指放在屏幕上面的時候、在屏幕上滑動的時候或者是從屏幕上移開的時候觸發(fā)，這其中包括以下幾個事件：

(on)touchstart：觸摸開始的時候觸發(fā)
(on)touchmove：手指在屏幕上滑動的時候觸發(fā)
(on)touchend：觸摸結束的時候觸發(fā)
(on)touchcancel：系統(tǒng)取消touch事件的時候觸發(fā)。例如電話接入或者彈出信息。一般用在游戲：玩著的時候，突然來電話了，就觸發(fā)touchcancel事件暫停游戲、存檔等操作。

那，在這里，小編主要用到了touchstart,touchmove和touchend這三個事件，分別用來捕獲用戶的觸屏行為：

在touchmove里面，大家要注意，由于微信中的webview會存在黑底的問題，因此我們拉動列表的時候，會出現(xiàn)露出微信上方黑底的問題，因此，我們需要調(diào)用preventDefault方法，防止事件繼續(xù)向上冒泡，從而防止用戶在拖動列表的時候，微信上方出現(xiàn)黑底，那樣會十分影響體驗。

那接下來，我們需要做的就是把這些觸摸事件綁定到滾動條上就行了：

那么，我們的下拉刷新的主要邏輯也就完成了

當然這里，我們也需要提供靈活的方式，能夠動態(tài)的去綁定和解綁下拉刷新和滾動刷新的方法

最后，因為我們的控件沒辦法知道我們的數(shù)據(jù)已經(jīng)加載完，因此我們需要提供一個方法，由外部的數(shù)據(jù)刷新方法調(diào)用結束后，通知我們的組件，數(shù)據(jù)已經(jīng)加載完，并且重新渲染下拉處或者底部處的樣式：

我們在組件中，也建議在vue的nextClick中對該方法進行調(diào)用：

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

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

最新評論