iscroll.js的使用

1.引入文件：
<script src="js/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="iscroll.js"></script>

2.加入css样式：

    <style type="text/css" media="all">

    #show {
        display: none;
    }

    #wrapper {
        position: absolute;
        z-index: 1;
        /* top:100px;
  left:12%;*/
        height: 100%;
        width: 100%;
        /* height:400px;
  width:80%;*/
        background: #aaa;
        /*border:1px red solid;*/
    }

    #scroller {
        position: absolute;
        z-index: 1;
        /*  -webkit-touch-callout:none;*/
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        width: 100%;
        padding: 0;
    }

    #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;
    }
    /**
 *
 * Pull down styles
 *
 */

    #pullDown,
    #pullUp {
        background: #fff;
        height: 40px;
        line-height: 40px;
        padding: 5px 10px;
        border-bottom: 1px solid #ccc;
        font-weight: bold;
        font-size: 14px;
        color: #888;
    }

    #pullDown .pullDownIcon,
    #pullUp .pullUpIcon {
        display: block;
        float: left;
        width: 40px;
        height: 40px;
        background: url("[email protected]") 0 0 no-repeat;
        -webkit-background-size: 40px 80px;
        background-size: 40px 80px;
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 250ms;
    }

    #pullDown .pullDownIcon {
        -webkit-transform: rotate(0deg) translateZ(0);
    }

    #pullUp .pullUpIcon {
        -webkit-transform: rotate(-180deg) translateZ(0);
    }

    #pullDown.flip .pullDownIcon {
        -webkit-transform: rotate(-180deg) translateZ(0);
    }

    #pullUp.flip .pullUpIcon {
        -webkit-transform: rotate(0deg) translateZ(0);
    }

    #pullDown.loading .pullDownIcon,
    #pullUp.loading .pullUpIcon {
        background-position: 0 100%;
        -webkit-transform: rotate(0deg) translateZ(0);
        -webkit-transition-duration: 0ms;

        -webkit-animation-name: loading;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
    }

    @-webkit-keyframes loading {
        from {
            -webkit-transform: rotate(0deg) translateZ(0);
        }
        to {
            -webkit-transform: rotate(360deg) translateZ(0);
        }
    }
    </style>

3.dom结构：

    <p id="show"></p>
    <div id="wrapper">
        <div id="scroller">
            <div id="pullDown">
                <span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
            </div>
            <div id="thelist" class="chose-schedule">
                <li>Pretty row 1</li>
                <li>Pretty row 2</li>
                <li>Pretty row 3</li>
            </div>
            <div id="pullUp" style="display:none;">
                <span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span>
            </div>
        </div>
    </div>

4.js代码：


<script type="text/javascript">
var myScroll,
    pullDownEl,
    pullDownOffset,
    pullUpEl,
    pullUpOffset,
    generatedCount = 0;
var newarr = DATA.datas

function pullDownAction() {
    setTimeout(function() { // <-- Simulate network congestion, remove setTimeout from production!
        var el, li, i;
        el = document.getElementById('thelist');


        // for (i=0; i<5; i++) {
        //   li = document.createElement('li');
        //   li.innerText = 'Generated row ' + (++generatedCount);
        //   el.insertBefore(li, el.childNodes[0]);
        // }
        document.getElementById("pullUp").style.display = "";
        myScroll.refresh();
    }, 1000);
}

function pullUpAction() {
    setTimeout(function() {
        var el, li, i;
        el = document.getElementById('thelist');
        // for (i = 0; i < 1; i++) {
        //     li = document.createElement('li');
        //     li.innerText = 'Generated row ' + (++generatedCount);
        //     el.appendChild(li, el.childNodes[0]);
        // }
        myScroll.refresh();
    }, 1000);
}

function loaded() {
    pullDownEl = document.getElementById('pullDown');
    pullDownOffset = pullDownEl.offsetHeight;
    pullUpEl = document.getElementById('pullUp');
    pullUpOffset = 10;
    //pullUpOffset = pullUpEl.offsetHeight;
    myScroll = new iScroll('wrapper', {
        useTransition: true,
        topOffset: pullDownOffset,
        onRefresh: function() {
            //that.maxScrollY = that.wrapperH - that.scrollerH + that.minScrollY;
            //that.minScrollY = -that.options.topOffset || 0;
            //alert(this.wrapperH);
            //alert(this.scrollerH);
            if (pullDownEl.className.match('loading')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
            }
            if (pullUpEl.className.match('loading')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
            }

            document.getElementById("pullUp").style.display = "none";
            document.getElementById("show").innerHTML = "onRefresh: up[" + pullUpEl.className + "],down[" + pullDownEl.className + "],Y[" + this.y + "],maxScrollY[" + this.maxScrollY + "],minScrollY[" + this.minScrollY + "],scrollerH[" + this.scrollerH + "],wrapperH[" + this.wrapperH + "]";
        },
        onScrollMove: function() {
            document.getElementById("show").innerHTML = "onScrollMove: up[" + pullUpEl.className + "],down[" + pullDownEl.className + "],Y[" + this.y + "],maxScrollY[" + this.maxScrollY + "],minScrollY[" + this.minScrollY + "],scrollerH[" + this.scrollerH + "],wrapperH[" + this.wrapperH + "]";
            if (this.y > 0) {
                pullDownEl.className = 'flip';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
                this.minScrollY = 0;
            }
            if (this.y < 0 && pullDownEl.className.match('flip')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                this.minScrollY = -pullDownOffset;
            }

            if (this.scrollerH < this.wrapperH && this.y < (this.minScrollY - pullUpOffset) || this.scrollerH > this.wrapperH && this.y < (this.maxScrollY - pullUpOffset)) {
                document.getElementById("pullUp").style.display = "";
                pullUpEl.className = 'flip';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
            }
            if (this.scrollerH < this.wrapperH && this.y > (this.minScrollY - pullUpOffset) && pullUpEl.className.match('flip') || this.scrollerH > this.wrapperH && this.y > (this.maxScrollY - pullUpOffset) && pullUpEl.className.match('flip')) {
                document.getElementById("pullUp").style.display = "none";
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
            }
        },
        onScrollEnd: function() {
            document.getElementById("show").innerHTML = "onScrollEnd: up[" + pullUpEl.className + "],down[" + pullDownEl.className + "],Y[" + this.y + "],maxScrollY[" + this.maxScrollY + "],minScrollY[" + this.minScrollY + "],scrollerH[" + this.scrollerH + "],wrapperH[" + this.wrapperH + "]";
            if (pullDownEl.className.match('flip')) {
                pullDownEl.className = 'loading';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
                pullDownAction(); // Execute custom function (ajax call?)
            }
            if (pullUpEl.className.match('flip')) {
                pullUpEl.className = 'loading';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
                pullUpAction(); // Execute custom function (ajax call?)
            }
        }
    });

    //setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}


document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', function() { setTimeout(loaded, 200); }, false);
</script>