主攻ASP.NET MVC4.0之重生:上下滑动屏幕动态加载数据

@{
    ViewBag.Title = "Index";
}

<!DOCTYPE html>
<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>摩卡新闻</title>


    <script src="~/Content/js/iscroll.js"></script>
    <script type="text/javascript">

        var myScroll,
            pullDownEl, pullDownOffset,
            pullUpEl, pullUpOffset,
            generatedCount = 0;

        function pullDownAction() {
            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)
            }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
        }

        function pullUpAction() {
            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.appendChild(li, el.childNodes[0]);
                }

                myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
            }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
        }

        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 (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?)
                    }
                }
            });

            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>

    <link href="~/Content/css/iscroll.css" rel="stylesheet" />
</head>
<body>

    <div id="header"><a href="#">摩卡新闻</a></div>
    <div id="wrapper">
        <div id="scroller">
            <div id="pullDown">
                <span class="pullDownIcon"></span><span class="pullDownLabel">↓往下拉,加油!!!</span>
            </div>

            <ul id="thelist">
                
<li>宁波电视台回应卫星车在余姚被砸    </li>
<!--文章中含有违禁内容   以下内容屏蔽
-->                
            </ul>
            <div id="pullUp">
                <span class="pullUpIcon"></span><span class="pullUpLabel">↑往上拉,查看更多!!!</span>
            </div>
        </div>
    </div>
    <div id="footer"><a href="#">Copyright 2013  摩卡移动网 m.moka.com </a></div>

</body>
</html>