登录 立即注册
安币:

查看: 761478|回复: 27

jqm配合iscroll实现的上拉显示更多下拉刷新效果

[复制链接]

17

主题

97

帖子

1036

安币

Android大神

Rank: 6Rank: 6

QQ达人

发表于 2013-1-16 23:06:02 | 显示全部楼层 |阅读模式
一切之前还是忍不住要骂一下jquery.mobile,最近本人正在学习ext js ,准备后面整sencha touch 去,jqm真心让人蛋疼,奈何又用了他没办法,只有硬着头皮上,一个好的前端真心给力,可惜俺不是前端,而且还是个小菜,之前做过一个demo,这里给出连接:http://www.apkbus.com/android-91577-1-1.html,在这里面给出了一个滚动效果,在实际项目中往往仅滚动是不够的,这次我在之前的帖子的基础上增加了上拉显示更多和下拉刷新的效果。其实很容易,我基本上是照搬iscroll包中给的例子,只不过稍微修改了一些内容。
下面给出代码,可怜我这小菜,为这些东西跑好多地方问人,牛逼的人前端要么没时间回答,要么不屑于回答,没办法只能自己研究,中间限于能力问题,没有写过多的注释。有能发现的,还请指出,最后附带效果图和我现在的工作台,呵呵,eclipse,真心喜欢!!
废话了,上代码:
[XHTML] 查看源文件 复制代码
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.css">
<title>追梦流云</title>
<script type="text/javascript" charset="utf-8" src="js/iscroll.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript">
	var myScroll;
	var pullDownEl;
	var pullDownOffset;
	var pullUpEl;
	var pullUpOffset;
	var count = 0;
	function pullDownAction() {//上拉事件
		setTimeout(function() {
			var el, li, i;
			el = document.getElementById('add');//在id为add的标签中加入3行
			for (i = 0; i < 3; i++) {//增加3条li标签
				li = document.createElement('li');//增加li标签
				li.innerText = '追梦!! 这是我第' + (++count) + "次追梦!";//增加内容
				el.insertBefore(li, el.childNodes[0]);//在id为add的子标签中加入li标签
			}
			myScroll.refresh(); // 刷新
		}, 1000); //1秒
	}
	function pullUpAction() {//下拉事件
		setTimeout(function() {
			var el, li, i;
			el = document.getElementById('add');

			for (i = 0; i < 3; i++) {
				li = document.createElement('li');
				li.innerText = '追梦!! 这是我第' + (++count) + "次追梦!";
				el.appendChild(li, el.childNodes[0]);
			}
			myScroll.refresh();
		}, 1000);
	}
	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 = 'Loading...';
							pullDownAction(); // Execute custom function (ajax call?)
						} else if (pullUpEl.className.match('flip')) {
							pullUpEl.className = 'loading';
							pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
							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>
<style type="text/css" media="all">
li,.list_style li {
	height: 20px;
	text-align: center;
	line-height: 20px;
}

#wrapper {
	position: absolute;
	z-index: 1;
	top: 80px;
	bottom: 60px;
	left: 0;
	width: 100%;
	overflow: hidden;
	padding: 0px;
}

#scroller {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	width: 100%;
	padding: 0;
}

#pullDown,#pullUp {
	background: #fff;
	height: 40px;
	line-height: 40px;
	padding: 5px 10px;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	font-size: 14px;
	color: #888;
}

#pullDown .pullDownIcon,#pullUp .pullUpIcon {
	display: block;
	float: left;
	width: 40px;
	height: 40px;
	background: url(./img/pull-icon@2x.png) 0 0 no-repeat;
	-webkit-background-size: 40px 80px;
	background-size: 40px 80px;
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 250ms;
}

#pullDown .pullDownIcon {
	-webkit-transform: rotate(0deg) translateZ(0);
}

#pullUp .pullUpIcon {
	-webkit-transform: rotate(-180deg) translateZ(0);
}

#pullDown.flip .pullDownIcon {
	-webkit-transform: rotate(-180deg) translateZ(0);
}

#pullUp.flip .pullUpIcon {
	-webkit-transform: rotate(0deg) translateZ(0);
}

#pullDown.loading .pullDownIcon,#pullUp.loading .pullUpIcon {
	background-position: 0 100%;
	-webkit-transform: rotate(0deg) translateZ(0);
	-webkit-transition-duration: 0ms;
	-webkit-animation-name: loading;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

@
-webkit-keyframes loading {from { -webkit-transform:rotate(0deg)translateZ(0);
	
}

to {
	-webkit-transform: rotate(360deg) translateZ(0);
}
}
</style>
</head>
<body>
	<div data-role="page" data-theme="b">
		<div data-role="header" data-position="fixed">
			<h3>追梦流云</h3>
			<div data-role="navbar">
				<ul>
					<li><a href="#">追</a></li>
					<li><a href="#">梦</a></li>
					<li><a href="#">流</a></li>
					<li><a href="#">云</a></li>
				</ul>
			</div>
		</div>
		<div id="wrapper" data-role="content">
			<div id="scroller">
				<div id="pullDown">
					<span class="pullDownIcon"></span> <span class="pullDownLabel">准备刷新...</span>
				</div>
				<ul id="add" class="list_style" data-role="listview">
					<li>我是天边的一片云,</li>
					<li>流动的 是我,</li>
					<li>在那遥远的天际,</li>
					<li>那里是完美世界,</li>
					<li>我要带上梦想的期冀,</li>
					<li>我要迈出坚定的步伐</li>
					<li>前去追梦!</li>
					<li>————来自追梦流云</li>
					<li>你想的越多,顾虑就越多,</li>
					<li>什么都不想的时候反而能一往直前,</li>
					<li>你害怕的越多,困难就越多,</li>
					<li>什么都不怕的时候一切反而没那么难。</li>
					<li>别害怕,别顾虑,想到就去做,</li>
					<li>这世界就是这样:</li>
					<li>当你不敢去实现梦想的时候,</li>
					<li>梦想会离你越来越远,</li>
					<li>当你勇敢地去追梦的时候</li>
					<li>全世界都会来帮你.</li>
					<li>谨此献给:</li>
					<li>所有正在追梦的你</li>
				</ul>
				<div id="pullUp">
					<span class="pullUpIcon"></span><span class="pullUpLabel">显示更多...</span>
				</div>
			</div>
		</div>
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar" style="height: 60px;">
				<ul>
					<li><a href="#" data-role="button" data-icon="gear">追梦</a></li>
					<li><a href="#" data-role="button" data-icon="gear">流云</a></li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

下面给出图片:


进入页

进入页

下拉中

下拉中

下拉后

下拉后

上拉显示更多

上拉显示更多

show 一下

show 一下

点评

楼主,下拉和上翻时没出现内容啊  发表于 2013-2-20 17:49
人的一生一定要疯狂一次,不管是为了一个人,一段旅程还是一个梦想!

主题

帖子

安币

游客

发表于 2014-9-24 17:07:04 | 显示全部楼层
效果不过不知斑竹有没有测试过数据较少的情况,在3条左右时会下拉刷新会有问题,上面部分刷新了,接连着下面也会跟着刷新,这是一个BUG,希望斑竹能调整下,让该代码效果帮助到更多的人

16

主题

97

帖子

171

安币

程序猿

Rank: 2

QQ达人

发表于 2013-1-16 23:55:36 | 显示全部楼层
新手学习下

0

主题

26

帖子

57

安币

程序猿

Rank: 2

发表于 2013-1-17 00:23:04 | 显示全部楼层
学习下

0

主题

97

帖子

83

安币

程序猿

Rank: 2

发表于 2013-1-17 00:24:13 | 显示全部楼层
谢楼主分享

0

主题

54

帖子

155

安币

程序猿

Rank: 2

QQ达人

发表于 2013-1-17 08:52:18 | 显示全部楼层
谢谢分享…

3

主题

297

帖子

642

安币

代码手工艺人

自治区

Rank: 4

发表于 2013-1-17 08:57:21 | 显示全部楼层
{:Skateboard:}{:Skateboard:}
明天会更好
发表于 2013-1-17 18:04:20 | 显示全部楼层
这个eclipse 背景怎么设置的额{:Skateboard:}

17

主题

97

帖子

1036

安币

Android大神

Rank: 6Rank: 6

QQ达人

 楼主| 发表于 2013-1-18 09:39:38 | 显示全部楼层
{:Skateboard:}{:Skateboard:}
人的一生一定要疯狂一次,不管是为了一个人,一段旅程还是一个梦想!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站长推荐

通过邮件订阅最新安卓weekly信息
上一条 /4 下一条

下载安卓巴士客户端

全国最大的安卓开发者社区
联系我们
关闭
合作电话:
15618560077
Email:
805941275@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 下载客户端|申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

快速回复 返回顶部 返回列表