iscroll

在原生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自行修改。

<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都是我懶的緣由，加入的框架。

對上述的結構進行實例化：

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") } });