基于iScroll实现上、下拉刷新，加载更多

一、需求分析

基于iScroll插件，实现页面上拉或下拉刷新，加载更多。

二、实现步骤

2.1 引用iScroll插件

<script src='iscroll-4.2.5fix.js'></script> 

2.2 搭建HTML主体

<div id="wrapper"> 
    <div id="scroller">
        <ul> <li></li> ... </ul> 
        <ul> <li></li> ... </ul>
    </div>
</div>

2.3 实现上拉刷新和下拉刷新方法
2.4 对iScroll进行实例化
这里采用onLoad事件实现滚动：

<script> 
var myscroll; 
function loaded(){
     setTimeout(
            function(){ 
            myscroll=new iScroll("wrapper"); }，100 );
     }
     window.addEventListener("load",loaded,false); 
</script>

2.5 2.3、实现iScroll插件的onScrollEnd事件

 //onScrollEnd:表示用户下拉刷新完,放开手指时所显示的不同的交互文字
        onScrollEnd: function () 
        {
            if (pullDownEl.className.match('flip')) 
            {
                pullDownEl.className = 'loading';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';                
                pullDownAction();   

            } else if (pullUpEl.className.match('flip')) 
            {
                pullUpEl.className = 'loading';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';                
                pullUpAction(); 

            }
        }

三、代码实例

1.CSS部分

/* CSS 文件  */
a:link,a:visited,a:hover
{ 
  text-decoration:none;  /*超链接无下划线*/
  color: inherit; /*inherit是继承父元素的属性*/
}
body,ul,li {
    padding:0; /*内边距*/
    margin:0; /*外边距*/
    border:0;
}

body {
    font-size:12px;
    -webkit-user-select:none; /*谷歌浏览器或谷歌移动平台上访问网页不能复制*/
    -webkit-text-size-adjust:none; /*关闭字体大小自动调整功能*/
    font-family:helvetica;
}

#header {
    position:absolute;
    top:0; left:0;
    width:100%;
    height:45px;
    line-height:45px;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
    background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
    background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
    padding:0;
    color:#eee;
    font-size:20px;
    text-align:center;
}

#header a {
    color:#f3f3f3;
    text-decoration:none;
    font-weight:bold;
    text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}

#footer {
    position:absolute;
    bottom:0; left:0;
    width:100%;
    height:45px;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
    background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
    background-image:-o-linear-gradient(top, #999, #666 2%, #222);
    padding:0;
    border-top:1px solid #444;
}

#wrapper {
    position:absolute; z-index:1;
    top:45px; bottom:48px; left:0;
    width:100%;
    background:#555;
    overflow:auto;
}

/*隐藏滚动条*/
#scroller {
    position:relative;
/*  -webkit-touch-callout:none;*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);

    float:left;
    width:100%;
    padding:0;
}


#scroller ul {
    position:relative;
    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;
    overflow:hidden;/*超宽部分不被显示*/
}

#scroller li > a {
    display:block;
}

#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(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;  
}
#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>

2.HTML部分

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll:上、下拉刷新，加载更多</title>
<link rel="stylesheet" type="text/css" href="test.css" />
<script src='iscroll-4.2.5fix.js'></script> <!--iscroll插件-->
<script type="text/javascript">
/**
 * 实现下拉刷新方法(pullDownAction)和上拉加载更多(pullUpAction)方法
 * 
   下面的 pullUpAction() 函数被下拉或上拉后调用，在此函数的最后，必须调用myScroll.refresh();
   以便在数据加载完成后，调用界面更新方法
 */
 var myScroll,
    pullDownEl, pullDownOffset,
    pullUpEl, pullUpOffset,
    generatedCount = 0;

//pullDownAction方法用于模拟上拉刷新成功后，向底端追加数据;
function pullUpAction ()
{
    //此处示例为每500毫秒产生一个行数据，共产生5行
    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 = '这是加载的第 ' + (++generatedCount) +'条数据';
            el.appendChild(li, el.childNodes[0]);
        }

        myScroll.refresh();     // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
    },500); // <-- Simulate network congestion, remove setTimeout from production!
}

//pullDownAction方法用于模拟下拉刷新成功后，向顶端追加数据;
function pullDownAction ()
{
    //此处示例为每500毫秒产生一个行数据，共产生3行
    setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
        var el, li, i;
        el = document.getElementById('thelist');

        for (i=0; i<3; i++) {
            li = document.createElement('li');
            li.innerText = '这是加载的第 ' + (++generatedCount) +'条数据';
            el.insertBefore(li, el.childNodes[0]);
        }

        myScroll.refresh();     // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
    },500); // <-- Simulate network congestion, remove setTimeout from production!
}

/*初始化iScroll控件*/
function loaded() {
    pullDownEl = document.getElementById('pullDown');
    pullDownOffset = pullDownEl.offsetHeight; //获取元素自身的高度
    pullUpEl = document.getElementById('pullUp');   
    pullUpOffset = pullUpEl.offsetHeight;

    myScroll = new iScroll('wrapper', {
        useTransition: false, //表示是否使用CSS3中的过渡效果，从true改为false
        topOffset: pullDownOffset, //pullDown区间高度
        onRefresh: function () 
        {
            if (pullDownEl.className.match('loading')) 
            {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
            } else if (pullUpEl.className.match('loading')) 
            {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
            }
        },
        //onScrollMove表示根据用户下拉或上拉刷新的高度值，显示不同的文字
        onScrollMove: function () 
        {
            //上下滑动判定，this.y表示手指下拉的高度
            if (this.y > 5 && !pullDownEl.className.match('flip')) {
                pullDownEl.className = 'flip';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
                this.minScrollY = 0;
            }
            else if (this.y < 5 && pullDownEl.className.match('flip')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                this.minScrollY = -pullDownOffset;
            }
            else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                pullUpEl.className = 'flip';
                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;
            }

        },

        /*实现iScroll插件的onScrollEnd事件，
         也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加。
         */
         //onScrollEnd:表示用户下拉刷新完,放开手指时所显示的不同的交互文字
        onScrollEnd: function () 
        {
            if (pullDownEl.className.match('flip')) 
            {
                pullDownEl.className = 'loading';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';                
                pullDownAction();   

            } else if (pullUpEl.className.match('flip')) 
            {
                pullUpEl.className = 'loading';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';                
                pullUpAction(); 

            }
        }
    });

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

/*
  touchmove:表示手指在屏幕上滑动连续触发的事件
*/
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
/*
  load事件：仅在所有资源都完全加载后才被触发
  DOMContentLoaded：DOM加载之后及资源加载之前被触发.
*/ 
document.addEventListener('DOMContentLoaded', loaded, false);   
</script>
</head>
<body>
<div id="header">
iScroll实例:上、下拉刷新翻页，基于HTML5
</div>
<div id="wrapper">
    <div id="scroller">
        <div id="pullDown">
            <span class="pullDownIcon"></span>
            <span class="pullDownLabel">下拉加载更多...</span>
        </div>
        <ul id="thelist">
            <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>
        </ul>
        <div id="pullUp">
            <span class="pullUpIcon"></span>
            <span class="pullUpLabel">上拉加载更多...</span>
        </div>

    </div>
</div>
<div id="footer">
    <table width="100%" height="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td align="center" ><!--valign调垂向位置，align调横向位置-->
                <div align="center">
                    <font color='#078CF9'><!--规定文本颜色-->
                        这里是下方栏
                    </font>
                </div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

四、运行结果