iScroll的上拉和下拉Demo实例

第一步: 引入iscroll-probe.js和jquery.min.js

第二步:html文档结构

        <div id="wrapper">
            <div id="scroller">
                <div id="pullDown" class="">
                    <div class="pullDownLabel"></div>
                </div>
                <div class="pulldown-tips">下拉刷新</div>
                <ul id="list">
                    <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 6</li>
                    <li>Pretty row 7</li>
                    <li>Pretty row 8</li>
                    <li>Pretty row 9</li>
                    <li>Pretty row 10</li>
                    <li>Pretty row 11</li>
                    <li>Pretty row 12</li>
                    <li>Pretty row 13</li>
                    <li>Pretty row 14</li>
                    <li>Pretty row 15</li>
                    <li>Pretty row 16</li>
                    <li>Pretty row 17</li>
                    <li>Pretty row 18</li>
                    <li>Pretty row 19</li>
                    <li>Pretty row 20</li>
                    <li>Pretty row 13</li>
                    <li>Pretty row 14</li>
                    <li>Pretty row 15</li>
                    <li>Pretty row 16</li>
                    <li>Pretty row 17</li>
                    <li>Pretty row 18</li>
                    <li>Pretty row 19</li>
                    <li>Pretty row 20</li>
                </ul>
                <div id="pullUp" class="">
                    <div class="pullUpLabel">加载更多</div>
                </div>
            </div>
        </div>

 

第三步:css样式

<style type="text/css">
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
            
            html {
                -ms-touch-action: none;
            }
            
            body,
            ul,
            li {
                padding: 0;
                margin: 0;
                border: 0;
            }
            
            body {
                font-size: 12px;
                font-family: ubuntu, helvetica, arial;
                overflow: hidden;
                /* this is important to prevent the whole page to bounce */
            }
            
            #header {
                position: absolute;
                z-index: 2;
                top: 0;
                left: 0;
                width: 100%;
                height: 45px;
                line-height: 45px;
                background: #CD235C;
                padding: 0;
                color: #eee;
                font-size: 20px;
                text-align: center;
                font-weight: bold;
            }
            
            #footer {
                position: absolute;
                z-index: 2;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 48px;
                background: #444;
                padding: 0;
                border-top: 1px solid #444;
            }
            
            #wrapper {
                position: absolute;
                z-index: 1;
                top: 0;
                bottom: 0;
                left: 0;
                width: 100%;
                background: #fff;/*上拉下拉背景颜色*/
                overflow: hidden;
            }
            
            #scroller {
                position: absolute;
                z-index: 1;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                width: 100%;
                -webkit-transform: translateZ(0);
                -moz-transform: translateZ(0);
                -ms-transform: translateZ(0);
                -o-transform: translateZ(0);
                transform: translateZ(0);
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                -webkit-text-size-adjust: none;
                -moz-text-size-adjust: none;
                -ms-text-size-adjust: none;
                -o-text-size-adjust: none;
                text-size-adjust: none;
            }
            
            #scroller ul {
                list-style: none;
                padding: 0;
                margin: 0;
                width: 100%;
                text-align: left;
            }
            
            #scroller li {
                padding: 0 10px;
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #ccc;
                border-top: 1px solid #fff;
                background-color: #fafafa;
                font-size: 14px;
            }
            
            #pullDown,
            #pullUp,
            .pulldown-tips {
                height: 40px;
                line-height: 40px;
                text-align: center;
            }
            
            .pulldown-tips {
                position: absolute;
                top: -40px;
                left: 0;
                width: 100%;
            }
        </style>

第四步:js部分

function load() {
    var myScroll,
        pullDown = $("#pullDown"),
        pullUp = $("#pullUp"),
        pullDownLabel = $(".pullDownLabel"),
        pullUpLabel = $(".pullUpLabel"),
        container = $('#list'),
        loadingStep = 0; //加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新  
 
    pullDown.hide();
    pullUp.hide();
 
    myScroll = new IScroll("#wrapper", {
        scrollbars: true,
        mouseWheel: true,
        interactiveScrollbars: true,
        shrinkScrollbars: 'scale',
        fadeScrollbars: true,
        scrollY: true,
        probeType: 2,
        bindToWrapper: true
    });
    myScroll.on("scroll", function() {
        if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh')) {
            if(this.y > 40) { //下拉刷新操作  
                $(".pulldown-tips").hide();
                pullDown.addClass("refresh").show();
                pullDownLabel.text("松手刷新数据");
                loadingStep = 1;
                myScroll.refresh();
            } else if(this.y < (this.maxScrollY - 14)) { //上拉加载更多  
                pullUp.addClass("refresh").show();
                pullUpLabel.text("正在加载");
                loadingStep = 1;
                pullUpAction();
            }
        }
    });
    myScroll.on("scrollEnd", function() {
        if(loadingStep == 1) {
            if(pullDown.attr("class").match("refresh")) { //下拉刷新操作  
                pullDown.removeClass("refresh").addClass("loading");
                pullDownLabel.text("正在刷新");
                loadingStep = 2;
                pullDownAction();
            }
        }
    });
    /**
     * 下拉加载事件
     */
    function pullDownAction() {
        setTimeout(function() {
            var li, i;
            for(i = 0, li = ""; i < 3; i++) {
                li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";
            }
            container.prepend(li);
            pullDown.attr('class', '').hide();
            myScroll.refresh();
            loadingStep = 0;
            $(".pulldown-tips").show();
        }, 1000);
    }
    /**
     * 上拉加载
     */
    function pullUpAction() {
        setTimeout(function() {
            var li, i;
            for(i = 0, li = ""; i < 3; i++) {
                li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";
            }
            container.append(li);
            pullUp.attr('class', '').hide();
            myScroll.refresh();
            loadingStep = 0;
        }, 1000);
    }
 
    document.addEventListener('touchmove', function(e) {
        e.preventDefault();
    }, false);
}