http://www.zhangyunling.com/359.html

重要提示

本插件已經經過更新，查看更新的插件代碼，以及介紹請查看：基於iscroll實現下拉和上拉刷新（優化）;

在原生APP的開發中，有一個常見的功能，就是下拉刷新的功能，這個想必大家都是知道的，但是原生APP的開發，有一個很大的問題就是，你每次更新一些功能，就要用戶重新下載一次版本，尤其是在IOS系統中，新版本還需要經過審核才能通過，這就使得版本的更新受到很大的限制，而如果我們改用網頁來展示，那麽只要改變服務器中網頁的內容，那麽就等於修改了APP的內容展示，有更靈活的滿足更新版本。

概述

但是有一點就是，如何讓web實現的頁面，看起來更像是原生的APP

這裏，我基於iscroll5的基礎上，進行了少量的改動源代碼，進而實現了下拉屬性的功能，所以分享在這裏，僅供參考。

關於iscroll插件

iscroll插件（官網地址）當前最新的版本是version 5版本，相對於版本4，我個人覺得，版本5變得更具有靈活性，雖然移除了一些特定的事件，特定的對外接口，但是對於使用該插件的程序員們，這個插件變得更具有操控性，這是我比較喜歡的一種插件類型，但同時，也發現了一些問題，事件中的touchend

所以，根據版本5，無法檢測到，是不是下拉了一段距離之後，松開時的動作了，對此，我也檢查了源代碼，也沒有發現這個功能的實現方法，不得已，只能對源代碼進行了少量的修改，所以就有了本篇文章。

修改後插件的使用

基本上，該方法並沒有進行多少的修改，只是添加了兩個事件的監聽類型，一個叫做“slideDown”，表示下拉被觸發，另一個叫做“slideUp”，表示上拉被觸發。

其他，實例化中，各屬性都沒有進行更改，所以，關於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")
    }
});

同時，註意一點，當你使用ajax添加或者刪除一些新的元素時，要重新myScroll.refresh()一下，會重新計算maxScrollY區域的，以保證區域覆蓋的正確性，這些東西，如果你真的使用到，那麽肯定可以碰到這些問題的，所以，這裏是我話多了~~~

OK，代碼就是這樣了，在寫這個文章的時候，旁邊沒有Android的設備，所以，沒有進行測試，只測試了IOS8的設備，所以，如果有問題，請指出，謝謝~~

上述例子的demo地址：下拉，上拉刷新demo。

也可以掃描二維碼：

總結

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

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

也可點擊鏈接：下載demo

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

本文地址：http://www.zhangyunling.com/?p=359

基於iscroll實現下拉和上拉刷新