在原生APP的開發中，有一個常見的功能，就是下拉刷新的功能，這個想必大家都是知道的，但是原生APP的開發，有一個很大的問題就是，你每次更新一些功能，就要用戶重新下載一次版本，尤其是在iOS系統中，新版本還需要經過審核才能通過，這就使得版本的更新受到很大的限制，而如果我們改用網頁來展示，那么只要改變服務器中網頁的內容，那么就等於修改了APP的內容展示，有更靈活的滿足更新版本。
概述
但是有一點就是，如何讓web實現的頁面，看起來更像是原生的APP呢，首先要想辦法解決的就是下拉刷新的功能，對於這個功能，我並沒有在網絡上找到很好的解決方法，並且，我個人對手機端的開發，經驗還是有些欠缺，這里就不羅列使用JS實現web頁下拉刷新的功能了。
這里，我基於iscroll5的基礎上，進行了少量的改動源代碼，進而實現了下拉屬性的功能，所以分享在這里，僅供參考。
關於iscroll插件
iscroll插件（官網地址）當前最新的版本是version 5版本，相對於版本4，我個人覺得，版本5變得更具有靈活性，雖然移除了一些特定的事件，特定的對外接口，但是對於使用該插件的程序員們，這個插件變得更具有操控性，這是我比較喜歡的一種插件類型，但同時，也發現了一些問題，事件中的touchend事件，不存在了（確切的說，不能說是不存在），只是被攔截了，所以一些基本的事件，都被進行了攔截，而導致無法監聽到touchend事件，只能檢測到scrollEnd事件，scrollEnd事件，是在頁面滾動停止時，才會被觸發的，所以~~
所以，根據版本5，無法檢測到，是不是下拉了一段距離之后，松開時的動作了，對此，我也檢查了源代碼，也沒有發現這個功能的實現方法，不得已，只能對源代碼進行了少量的修改，所以就有了本篇文章。
修改后插件的使用
基本上，該方法並沒有進行多少的修改，只是添加了兩個事件的監聽類型，一個叫做“slideDown”，表示下拉被觸發，另一個叫做“slideUp”，表示上拉被觸發。
其他，實例化中，各屬性都沒有進行更改，所以，關於iscroll的使用，直接參考官網的說明：iscroll官網。
這里，我只對新添加的事件，添加一個demo測試，這個demo是一個很簡單的demo，也只是用來說明新添加事件的用法的，如果需要用到下拉刷新或者上拉刷新的朋友，可以根據本demo自行修改。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
<div id="wrapper"> <div id="scroller"> <div id = "scroller-pullDown"> <span id = "down-icon" class = "icon-double-angle-down pull-down-icon"></span> <span id = "pullDown-msg" class = "pull-down-msg">下拉刷新</span> </div> <div id = "scroller-content"> <ul> <li>Pretty row 1</li> <li>Pretty row 2</li> <li>Pretty row 3</li> <li>Pretty row 4</li> <li>Pretty row 5</li> ... <li>Pretty row 46</li> <li>Pretty row 47</li> <li>Pretty row 48</li> <li>Pretty row 49</li> <li>Pretty row 50</li> </ul> </div> <div id = "scroller-pullUp"> <span id = "up-icon" class = "icon-double-angle-up pull-up-icon"></span> <span id = "pullUp-msg" class = "pull-up-msg">上拉刷新</span> </div> </div> </div>
CSS部分這里就不多說了，有興趣的可以直接保存該網頁，然后把相關代碼分離即可，對應的JS和CSS代碼，分別為iscroll.js和iscroll.css文件，其他的bootstrap和jQuery都是我懶的原因，加入的框架。
對上述的結構進行實例化：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
var myScroll,
upIcon = $("#up-icon"), downIcon = $("#down-icon"); myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true }); //probeType屬性，表明此插件，可以監聽scroll事件 myScroll.on("scroll",function(){ //scroll事件，可以用來控制上拉和下拉之后顯示的模塊中， //樣式和內容展示的部分的改變。 var y = this.y, maxY = this.maxScrollY - y, downHasClass = downIcon.hasClass("reverse_icon"), upHasClass = upIcon.hasClass("reverse_icon"); if(y >= 40){ !downHasClass && downIcon.addClass("reverse_icon"); return ""; }else if(y < 40 && y > 0){ downHasClass && downIcon.removeClass("reverse_icon"); return ""; } if(maxY >= 40){ !upHasClass && upIcon.addClass("reverse_icon"); return ""; }else if(maxY < 40 && maxY >=0){ upHasClass && upIcon.removeClass("reverse_icon"); return ""; } }); myScroll.on("slideDown",function(){ //當下拉，使得邊界超出時，如果手指從屏幕移開，則會觸發該事件 if(this.y > 40){ //獲取內容於屏幕拉開的距離 //可以在該部分中，修改樣式，並且僅限ajax或者其他的一些操作 //此時只是為了能演示該功能，只添加了一個alert功能。 //並且，由於alert會阻塞后續的動畫效果，所以， //添加了后面的一行代碼，移除之前添加上的一個樣式 alert("slideDown"); upIcon.removeClass("reverse_icon"); } }); myScroll.on("slideUp",function(){ if(this.maxScrollY - this.y > 40){ //與slideDown相同的，maxScrollY表示文檔區域的最大高度 alert("slideUp"); upIcon.removeClass("reverse_icon") } });
同時，注意一點，當你使用ajax添加或者刪除一些新的元素時，要重新myScroll.refresh()一下，會重新計算maxScrollY區域的，以保證區域覆蓋的正確性，這些東西，如果你真的使用到，那么肯定可以碰到這些問題的，所以，這里是我話多了~~~
OK，代碼就是這樣了，在寫這個文章的時候，旁邊沒有Android的設備，所以，沒有進行測試，只測試了IOS8的設備，所以，如果有問題，請指出，謝謝~~
上述例子的demo地址：下拉，上拉刷新demo。
也可以掃描二維碼：
總結
我的本意是把這個方法，寫成一個基於iscroll的插件，但當前還沒有完成，所以現在只給出一個最簡單demo，待我閑暇時間，把該插件進行完善一下。
注：本例中引入的iscroll.js經過了作者本人的一些修改，所以跟官網的代碼，有出入，如需驗證該問題，請自行下載demo。
也可點擊鏈接：下載demo
如有問題，也請不吝指教，謝謝！