使用iScroll实现上、下滑动刷新和加载更多数据

1、下载iScorll v4.2.5，引用其中的iscroll.js

2、html：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <!-- 移动设备支持 -->
 5     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
 6     <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
 7     <meta content="no-cache,must-revalidate" http-equiv="Cache-Control"/>
 8     <meta content="no-cache" http-equiv="pragma"/>
 9     <meta content="0" http-equiv="expires"/>
10     <meta content="telephone=no, address=no" name="format-detection"/>
11     <meta name="apple-mobile-web-app-capable" content="yes"/>
12     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
13 
14     <link href="css/common.css" rel="stylesheet" type="text/css" />
15     <link href="css/news.css" rel="stylesheet" type="text/css" />
16     <title>新闻资讯</title>
17 </head>
18 <body>
19     <div id="wrapper">
20         <div id="content-wrapper">
21             <div id="content">
22                 <div id="content-scroller">
23                     
24                 </div>
25             </div>
26         </div>
27     </div>
28     <!--<script src="http://123.124.255.158/commonScript/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>-->
29     <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
30     <script src="http://123.124.255.158/commonScript/format.js" type="text/javascript"></script>
31     <script src="Script/iscroll.js" type="text/javascript"></script>
32     <script src="Script/fastclick.js" type="text/javascript"></script>
33     <script src="Script/news.js" type="text/javascript"></script>
34 </body>
35 </html>

3、css：

 1 html{
 2     height:100%;
 3 }
 4 
 5 body{
 6     height:100%;
 7 }
 8 
 9 #wrapper{
10     height:100%;
11     
12 }
13 
14 #content-wrapper{
15     position:relative;
16     height:100%;
17 }
18 
19 #content{
20     position:absolute;
21     top:0; bottom:0; left:0; right:0;
22 }
23 
24 #myFrame {
25     position:absolute;
26     top:0; left:0;
27 }
28 
29 
30 
31 /**
32  *
33  * Pull down styles
34  *
35  */
36 #pullDown, #pullUp {
37     background:#fff;
38     height:40px;
39     line-height:40px;
40     padding:5px 10px;
41     border-bottom:1px solid #ccc;
42     font-weight:bold;
43     font-size:14px;
44     color:#888;
45     text-align:center;
46 }
47 #pullDown .pullDownIcon, #pullUp .pullUpIcon  {
48     display:inline-block; 
49     /*float:left;*/
50     width:40px; 
51     height:40px;
52     background:url(../images/pull-icon@2x.png) center 0 no-repeat;
53     background-size:40px 80px;
54     -webkit-background-size:40px 80px; 
55     -webkit-transition-property:-webkit-transform;
56     -webkit-transition-duration:250ms;    
57 }
58 #pullDown .pullDownIcon {
59     -webkit-transform:rotate(0deg) translateZ(0);
60 }
61 #pullUp .pullUpIcon  {
62     -webkit-transform:rotate(-180deg) translateZ(0);
63 }
64 
65 #pullDown.flip .pullDownIcon {
66     -webkit-transform:rotate(-180deg) translateZ(0);
67 }
68 
69 #pullUp.flip .pullUpIcon {
70     -webkit-transform:rotate(0deg) translateZ(0);
71 }
72 
73 #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
74     background-position:0 100%;
75     -webkit-transform:rotate(0deg) translateZ(0);
76     -webkit-transition-duration:0ms;
77 
78     -webkit-animation-name:loading;
79     -webkit-animation-duration:2s;
80     -webkit-animation-iteration-count:infinite;
81     -webkit-animation-timing-function:linear;
82 }
83 
84 @-webkit-keyframes loading {
85     from { -webkit-transform:rotate(0deg) translateZ(0); }
86     to { -webkit-transform:rotate(360deg) translateZ(0); }
87 }

4、js：

/// <reference path="http://192.168.1.102/commonscript/format.js"/>
/// <reference path="http://192.168.1.102/commonscript/jQuery/jquery-1.8.3-vsdoc.js"/>

var _sRequestUrl = 'getData.ashx';
var _openId = getQueryString('openid');

var _typeId = 1;
var _amountSum = 10; //初始账户金额（万元）
var _oFundList = {};

var _newsParam = {
    requestUrl: 'http://192.168.1.102/InfoService/InfoService.ashx',
    FunctionId: 11003,
    WhereValue: getMonth(-1, '') + ';' + getDate(0, ''),
    PageIndex: 1,
    PageSize: 50
}

var myScroll, generatedCount = 0;

$(document).ready(function () {
    FastClick.attach(document.body);

    var aHtml = [];
    aHtml.push('<div id="pullDown">');
    aHtml.push('<span class="pullDownIcon">&nbsp;</span><span class="pullDownLabel">下拉即可刷新</span>');
    aHtml.push('</div>');

    /***顶部展示img图片时，必须提前展示，如果与table数据同时加载展示的话，滚动条的高度计算错误，页面初始化时无法滑动到最底部***/
    aHtml.push('<img width="100%" height="auto" src="images/news-top.jpg"/>');
    aHtml.push('<table border="0" cellpadding="0" cellspacing="0" class="tab1" id="thelist">');
    aHtml.push('</table>');

    aHtml.push('<div id="pullUp">');
    aHtml.push('<span class="pullUpIcon">&nbsp;</span><span class="pullUpLabel">加载更多...</span>');
    aHtml.push('</div>');
    $('#content-scroller').html(aHtml.join(''));

    init(true);
});

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

function init(type) {
    fnGetNewsList(_newsParam, function (response) {
        var aHtml = [];
        aHtml.push('<tr>');
        aHtml.push('<td>');
        aHtml.push('<a id="n-f-title" href="newsFinance.html">金融街<span id="paper-type"><span></a>');
        aHtml.push('</td>');
        aHtml.push('<td class="time"><span class="n-f-type">专题</span>');
        aHtml.push('</tr>');
        aHtml.push(fnCreateHtmlContent(response));
        $('#thelist').html(aHtml.join(''));

        fnGetNewsFinance();
        if (type) {
            initIscroll();
        } else {
            myScroll.refresh();
        }
    });
}

function fnGetNewsList(param, callback) {
    /// <summary>获取新闻列表</summary>
    $.ajax({
        url: _sRequestUrl,
        data: param,
        dataType: 'xml',
        success: function (response) {
            var oData = response.getElementsByTagName('info');
            if (oData.length == 0) {
                return;
            }
            callback(oData);
        },
        error: function () {

        }
    });
}

function fnGetNewsFinance() {
    /// <summary>获取新闻早晚报</summary>
    $.ajax({
        url: _sRequestUrl,
        data: {
            requestUrl: 'WeChat/FundFinancePaper'
        },
        dataType: 'json',
        success: function (response) {
            var oData = response;
            if (!oData || oData.length == 0) {
                return;
            }
            var newsType = '';
            if (oData[0].S0 == 0) {
                newsType = '早报';
            } else {
                newsType = '晚报';
            }
            $('#content-wrapper #paper-type').text(newsType);
        },
        error: function () {

        }
    });
}

function fnCreateHtmlContent(oInfoData) {
    /// <summary>创建资讯列表HTML页面</summary>
    /// <param name="oInfoData" type="XML">返回的资讯数据</param>
    /// <returns type="String">创建的HTML内容</returns>
    var aHtml = [];
    $.each(oInfoData, function (index) {
        aHtml.push(String.format('<tr infoId="{0}">', this.getAttribute('id')));
        aHtml.push(String.format('<td><a href="{1}">{0}</a></td>', this.textContent, 'newsDetail.html?infoId=' + this.getAttribute('id')));
        aHtml.push(String.format('<td class="time">{0}</td>', this.getAttribute('id').substr(0, 8).toDateString('-').substr(5, 5)));
        aHtml.push('</tr>');
    });
    return aHtml.join('');
}

function initIscroll() {
    /// <summary>在数据展示完毕后，初始化iscroll框架</summary>
    var pullDownEl = document.getElementById('pullDown');
    var pullDownOffset = pullDownEl.offsetHeight;
    var pullUpEl = document.getElementById('pullUp');
    var pullUpOffset = pullUpEl.offsetHeight;

    myScroll = new iScroll('content', {
        useTransition: true,
        topOffset: pullDownOffset,
        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: function () {
            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;
            }
        },
        onScrollEnd: function () {
            if (pullDownEl.className.match('flip')) {
                pullDownEl.className = 'loading';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中，请稍后...';
                pullDownAction(); // Execute custom function (ajax call?)
            } else if (pullUpEl.className.match('flip')) {
                pullUpEl.className = 'loading';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中，请稍后...';
                pullUpAction(); // Execute custom function (ajax call?)
            }
        }
    });
}

function pullDownAction() {
    /// <summary>向下滑动，刷新数据</summary>
    _newsParam.PageIndex = 1;
    init(false);
}

function pullUpAction() {
    /// <summary>向上滑动，加载更多数据</summary>
    _newsParam.PageIndex = Number(_newsParam.PageIndex) + 1;
    fnGetNewsList(_newsParam, function (response) {
        $('#content-wrapper .tab1').append(fnCreateHtmlContent(response));
        myScroll.refresh();
    });

}