@{

    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 MVC4.0之重生:上下滑动屏幕动态加载数据的更多相关文章

  1. 主攻ASP.NET MVC4.0之重生:ASP.NET MVC使用JSONP

    原文:主攻ASP.NET MVC4.0之重生:ASP.NET MVC使用JSONP 原文地址 http://www.codeguru.com/csharp/.net/net_asp/using-jso ...

  2. 主攻ASP.NET MVC4.0之重生:Asp.Net MVC WebApi OData

    1.新建MVC项目,安装OData Install-Package Microsoft.AspNet.WebApi.OData -Version 4.0.0 2.新建WebAPI Controller ...

  3. 主攻ASP.NET MVC4.0之重生:ASP.NET MVC Web API

    UserController代码: using GignSoft.Models; using System; using System.Collections.Generic; using Syste ...

  4. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 列表

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  5. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素

    相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  6. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 主攻ASP.NET MVC4.0之重生:CheckBoxListHelper和RadioBoxListHelper的使用

    在项目中新建Helpers文件夹,创建CheckBoxListHelper和RadioBoxListHelper类. CheckBoxListHelper代码 using System; using ...

  8. 主攻ASP.NET MVC4.0之重生:MVC Controller修改Controller.tt模版,自动添加版本注释信息

    第一步找到MVC 4.0 CodeTemplates 一般路径在:C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\Ite ...

  9. 主攻ASP.NET MVC4.0之重生:使用反射获取Controller的ActionResult

    示例代码 public ActionResult TypeOfForName() { Type typeinfo = typeof(CustomerClassController); //typeof ...

随机推荐

  1. 关于在Java中链接SQLServer数据库中失败的原因分析

    首先声明:笔者是Java的初学者,并且一值是走在自学的道路上,长久以来只有“度娘”相伴.(加入了各种Java学习群,基本没有热心帮人解决问题的.可以理解-_-!!!)大神级的人物就不必看拙文了,没有什 ...

  2. day22模块和包

       一.模块 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写的代码(. ...

  3. Building Shops

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total Submissi ...

  4. MySQL (时间)日期相减取天数

    select TO_DAYS(str_to_date('12/1/2001 12:00:00 AM','%m/%d/%Y')) -TO_DAYS(str_to_date('11/28/2001 12: ...

  5. 巨蟒python全栈开发数据库前端9:bootstrap

    1.bootstrap的主网站: http://www.bootcss.com/ (1)bootstrap的CSS样式 (2)bootstrap组件 (3)JavaScript插件 (4)阿里图标库的 ...

  6. iOS 多线程之 NSThread的基本使用

    一个NSThread对象就代表一条线程 下面是NSThread开启线程的方法 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEv ...

  7. 常用代码块：创建httpclient

    HttpGet httpGet = new HttpGet(url); SSLContext sslcontext = SSLContexts.custom() .loadTrustMaterial( ...

  8. mui 视频播放

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. Eclipse中执行maven命令（转载）

    转载自:http://blog.csdn.net/u011939453/article/details/43017865 1.如下图,右击需要执行maven命令的工程,选择"Debug As ...

  10. C#编写图书列表winform

    Book.cs文件 using System; using System.Collections.Generic; using System.Linq; using System.Text; usin ...