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

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

主攻ASP.NET MVC4.0之重生:上下滑动屏幕动态加载数据   主攻ASP.NET MVC4.0之重生:上下滑动屏幕动态加载数据  主攻ASP.NET MVC4.0之重生:上下滑动屏幕动态加载数据 主攻ASP.NET MVC4.0之重生:上下滑动屏幕动态加载数据   主攻ASP.NET MVC4.0之重生:上下滑动屏幕动态加载数据   主攻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>

 

你可能感兴趣的:(asp.net)