在原生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的裝置，所以，如果有問題，請指出，謝謝~~

也可以掃描二維碼：

總結

我的本意是把這個方法，寫成一個基於iscroll的外掛，但當前還沒有完成，所以現在只給出一個最簡單demo，待我閒暇時間，把該外掛進行完善一下。

注：本例中引入的iscroll.js經過了作者本人的一些修改，所以跟官網的程式碼，有出入，如需驗證該問題，請自行下載demo。

如有問題，也請不吝指教，謝謝！