主攻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 ...
随机推荐
- Android仿QQ复制昵称效果2
本文同步自http://javaexception.com/archives/77 背景: 在上一篇文章中,给出了一种复制QQ效果的方案,今天就来讲讲换一种方式实现.主要依赖的是一个开源项目https ...
- linux oracle配置开机启动
参考:http://jingyan.baidu.com/article/b2c186c8fe4306c46ef6ff16.html 先以root身份登录到linux系统, 1. 修改vi /etc/o ...
- VBA 字符串操作
Trim(string) 去掉string左右两端空白 Ltrim(string) 去掉string左端空白 Rtrim(string) 去掉string右端空白 Len(string) 计算stri ...
- linq to sql 动态构建查询表达式树
通过Expression类进行动态构造lamda表达式. 实现了以下几种类型,好了代码说话: public Expression<Func<T, bool>> GetAndLa ...
- Web里URL空格的转换方法
今天收到一个Bug修复的任务,Bug为在页面上输入一个文件夹名包含空格,点击该文件夹的URL后链接错误. 看URL是HttpUtility.UrlEncode将空格转换成了“+”号,原因找到就着手解决 ...
- 更新mac系统和更新到Xcode7.3版本出现的： cannot create __weak reference in file using manual reference counting
之前的编程没有遇到过,应该是苹果官方那边又做了新规吧. 不过不要紧,只要根据这个就能解决报错问题. Set Build Settings -> Apple LLVM 7.1 - Languag ...
- GOCR v0.50 原理分析
一,简介: GOCR是一个c写的开源OCR库,GNU Public License,作者:Joerg Schulenburg 项目主页:http://jocr.sourceforge.net/inde ...
- 如何顺利解决mac下命令不管用的情况
背景: 昨晚通过brew安装了node,结果导致我的终端除了cd和ls管用外,其他的命令都不管用了,网上搜索了一大堆,结果没有一个能正确解决我的问题的,记录一下吧. 打开终端就显示: -bash: t ...
- lumen-Permission 权限管理使用心得
安装 composer require spatie/laravel-permission github上有详细介绍:https://github.com/spatie/laravel-permiss ...
- webService通过response和request对象传输文件
<code class=" hljs java">package gacl.response.study; 2 3 import java.io.IOException ...