iscroll的应用

1 引入js

<script src="<%=path%>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/scroll/iscroll.js" ></script>

2 样式表(可参见官方demo)

    <style type="text/css" media="all">
    body {
        font-size:12px;
        -webkit-user-select:none;
        -webkit-text-size-adjust:none;
        font-family:helvetica;
    }
    
    #wrapper {
        position:absolute; z-index:1;
        top:0px; /*顶头空白*/
        bottom:48px; left:-9999px;
        width:100%;
        background:#e6ecec;
        overflow:auto;
    }
    
    #scroller {
        position:absolute; z-index:1;
    /*    -webkit-touch-callout:none;*/
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        width:100%;
        padding:0;
    }
    
    #scroller li {
    margin-bottom:5px;
    }
    
    #pullDown{
        height:40px;
        padding:5px 10px;
        font-size:14px;
    }    
    
    #pullUp {
        background:#fff;
        height:40px;
        line-height:40px;
        padding:5px 10px;
        border-bottom:1px solid #ccc;
        font-weight:bold;
        font-size:14px;
        color:#888;
    }
    
    #pullUp .pullUpIcon  {
        display:block; float:left;
        width:40px; height:40px;
        /*background:url(pull-icon@2x.png) 0 0 no-repeat;*/
        -webkit-background-size:40px 80px; background-size:40px 80px;
        -webkit-transition-property:-webkit-transform;
        -webkit-transition-duration:250ms;    
    }
    
    #pullUp .pullUpIcon  {
        -webkit-transform:rotate(-180deg) translateZ(0);
    }
    
    #pullUp.flip .pullUpIcon {
        -webkit-transform:rotate(0deg) translateZ(0);
    }
    
    #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 js 

 

function pullUpAction () {
            /*
            setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
                
                //var el, li, i;
                //el = document.getElementById('thelist');
        
                //for (i=0; i<10; i++) {
                //    li = document.createElement('li');
                //    li.innerText = 'Generated row ' + (++generatedCount);
                //    el.appendChild(li, el.childNodes[0]);
                //}
                
                createInnerHTML();
                myscroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
            }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
            */
            createInnerHTML();
            myscroll.refresh();
        }
        
        
        function loaded(){
            pullDownEl = document.getElementById('pullDown');
            pullDownOffset = pullDownEl.offsetHeight;
            pullUpEl = document.getElementById('pullUp');    
            pullUpOffset = pullUpEl.offsetHeight;
            
            myscroll=new iScroll("wrapper",{
                useTransition: true,
                topOffset: pullDownOffset,
                onRefresh: function () {
                    if (pullUpEl.className.match('loading')) {
                        pullUpEl.className = '';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '向上拉动获取更多内容...';
                        
                        if(isBottom){
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '已经到最底端...';
                        }else{
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '向上拉动获取更多内容...';
                        }
                        
                    }
                },
                onScrollMove: function () {
                    if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                        pullUpEl.className = 'flip';
                        //pullUpEl.querySelector('.pullUpLabel').innerHTML = '松开刷新...';
                        if(isBottom){
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '已经到最底端...';
                        }else{
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '松开刷新...';
                        }
                        this.maxScrollY = this.maxScrollY;
                    } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                        pullUpEl.className = '';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '向上拉动获取更多内容...';
                        this.maxScrollY = pullUpOffset;
                    }
                },
                onScrollEnd: function () {
                    if (pullUpEl.className.match('flip')) {
                        pullUpEl.className = 'loading';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '数据加载中...';                
                        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);

 

 

 

4 html

<body>
       <div id="wrapper" data-role="page" data-theme="f" data-fullscreen="true"> 
    　 <div id="scroller" data-role="content">
        <div id="pullDown" display="none">
            <span class="pullDownIcon"></span><span class="pullDownLabel"></span>
        </div>
        
        <ul id="thelist" class="myapp">
            <script>
                createInnerHTML();
            </script>
        </ul>
        
        <div id="pullUp">
                <span class="pullUpIcon"></span><span class="pullUpLabel">向上拉动获取更多内容...</span>
        </div>
      </div> 
    </div>
    
    <div id="footer"></div>    
  </body>