主攻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 MVC4.0之重生:上下滑动屏幕动态加载数据的更多相关文章
- 主攻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 ...
- 主攻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 ...
- 主攻ASP.NET MVC4.0之重生:ASP.NET MVC Web API
UserController代码: using GignSoft.Models; using System; using System.Collections.Generic; using Syste ...
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 列表
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素
相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 主攻ASP.NET MVC4.0之重生:CheckBoxListHelper和RadioBoxListHelper的使用
在项目中新建Helpers文件夹,创建CheckBoxListHelper和RadioBoxListHelper类. CheckBoxListHelper代码 using System; using ...
- 主攻ASP.NET MVC4.0之重生:MVC Controller修改Controller.tt模版,自动添加版本注释信息
第一步找到MVC 4.0 CodeTemplates 一般路径在:C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\Ite ...
- 主攻ASP.NET MVC4.0之重生:使用反射获取Controller的ActionResult
示例代码 public ActionResult TypeOfForName() { Type typeinfo = typeof(CustomerClassController); //typeof ...
随机推荐
- thinkphp 跨模块调用
5.13 跨模块调用 在开发过程中经常会在当前模块调用其他模块的方法,这个时候就涉及到跨模块调用,我们还可以了解到A和R两个快捷方法的使用.例如,我们在Index模块调用User模块的操作方法 c ...
- Eclipse 创建 Java 项目
打开新建 Java 项目向导 通过新建 Java 项目向导可以很容易的创建 Java 项目.打开向导的途径有: 通过点击 "File" 菜单然后选择 New > Java P ...
- springmvc 生命周期
1A)客户端发出http请求,只要请求形式符合web.xml 文件中配置的*.action的话,就由DispatcherServlet 来处理. 1B)DispatcherServlet再将http请 ...
- Linux 下 -bash: mysql: command not found解决办法
-bash: mysql: command not found 1.vim ~/.bash_profile 最下面写 export PATH=$PATH:/usr/local/mysql/bin(你的 ...
- windows 下XAMPP 使用Nginx替代apache作为服务器
说实话, 在windows下使用Nginx 着实有点不太方便, 但因项目需求, 又不想换系统(虽然可以搞个虚拟机玩), 只能用Nginx了 好了, 不多说了. 开始... 首先我用的是xampp包(A ...
- PHP中通过数组遍历找出最小值
举例: $a = array(1,2,4,0,9,8,6);//定义一个数组 $len = count($a);//获取数组的长度 $min = $a[0];//默认情况下数组的第一个值是最小的 fo ...
- FreeMarker / S2SH 各种报错解决方案
1. org.hibernate.PropertyAccessException: IllegalArgumentException occurred while calling setter of ...
- C#安装，启动，停止，卸载Windows服务
public class OptionServices { //安装服务 public static void InstallService(string filep ...
- Kotlin——初级篇（三）：数据类型详解
任意一种开发语言都有其数据类型,并且数据类型对于一门开发语言来说是最基本的构成,同时也是最基础的语法.当然,Kotlin也不例外.Kotlin的数据类型和Java是大致相同的,但是他们的写法不同,并且 ...
- Convert.ToInt32(string '000000003') 变成了 3
Convert.ToInt32(string '000000003') 变成了 3 但是在查询的时候需要用的是string 这里的convert.toint32 反而起了坏作用,不是所有的时候都要用c ...