主攻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 ...
随机推荐
- Hibernate生成器类
在Hibernate中,id元素的<generator>子元素用于生成持久化类的对象的唯一标识符. Hibernate框架中定义了许多生成器类. 所有的生成器类都实现了org.hibern ...
- Spring MVC Xml视图解析器
XmlViewResolver用于在xml文件中定义的视图bean来解析视图名称.以下示例演示如何在Spring Web MVC框架使用XmlViewResolver. XmlViewResolver ...
- struts.xml文件:
struts.xml文件中包含的配置信息,你将修改所采取的措施的开发.这个文件可以被用来覆盖默认设置的应用程序,例如struts.devMode=false和其他设置中定义的属性文件.这个文件可以创建 ...
- css3的线性渐变效果
1.代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- composer爆错：zlib_decode():data error
昨晚用nginx运行Yii的一个开源小项目,结果composer安装依赖一直报错,如下 Failed to decode response: zlib_decode(): data error 如果遇 ...
- webservice 使用axis2实现
Axis2 是Apache的:使用下载 :org.apache.axis2.eclipse.service.plugin_1.6.2.jar org.apache.axis2.eclipse.code ...
- 集成 SOLR 到 TOMCAT 中（傻瓜教程）
按照如下配置,整个 Solr 是绿色版的,可以将 Tomcat 目录复制到任何一个地方运行 1.下载 solr 4.3 版本 2.下载 Tomcat 7 ( 6 也可以),另外可以根据系统下载 32 ...
- HTML学习笔记——标准网页设计+使用CSS、Javascript
一.标准网页设计 1.标准网页概述: 标准网页设计要遵循,内容与表现相分离. 内容 + 表现 = 页面 --- 即 :XHTML + CSS = PAGE 内容与变现相分离,也就是内容使用HT ...
- SharePoint server 2016中文版导出list template，在另外一个环境不能显示
SharePoint server 2016中文版导出list template,在另外一个环境不能显示,解决方案: $web = Get-SPWeb <url of web> $web. ...
- 1603 限高二叉排列树(计数DP)
1603 限高二叉排列树 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 作为游戏魔方的编写者和管理员,Bob在很多主存模块中 ...