jqm配合iscroll实现的上拉显示更多下拉刷新效果
2013-11-20 00:15
363 查看
一切之前还是忍不住要骂一下jquery.mobile，最近本人正在学习ext js ，准备后面整sencha touch 去，jqm真心让人蛋疼，奈何又用了他没办法，只有硬着头皮上，一个好的前端真心给力，可惜俺不是前端，而且还是个小菜，之前做过一个demo，这里给出连接:http://www.apkbus.com/android-91577-1-1.html,在这里面给出了一个滚动效果，在实际项目中往往仅滚动是不够的，这次我在之前的帖子的基础上增加了上拉显示更多和下拉刷新的效果。其实很容易，我基本上是照搬iscroll包中给的例子，只不过稍微修改了一些内容。
下面给出代码，可怜我这小菜，为这些东西跑好多地方问人，牛逼的人前端要么没时间回答，要么不屑于回答，没办法只能自己研究，中间限于能力问题，没有写过多的注释。有能发现的，还请指出，最后附带效果图和我现在的工作台，呵呵，eclipse，真心喜欢！！
废话了，上代码：
<!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>
下面给出代码，可怜我这小菜，为这些东西跑好多地方问人，牛逼的人前端要么没时间回答，要么不屑于回答，没办法只能自己研究，中间限于能力问题，没有写过多的注释。有能发现的，还请指出，最后附带效果图和我现在的工作台，呵呵，eclipse，真心喜欢！！
废话了，上代码：
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 点击侧滑任何一个 菜单项，请求网络数据展示在主界面的xlistview中且实现下拉刷新效果和上拉加载的分页加载数据效果
- 基于iscroll实现下拉和上拉刷新
- 实现ListView的弹性效果，下拉隐藏ToolBar(ActionBar),上拉显示ToolBar
- SwipeRefreshLayout配合RecyclerView实现下拉刷新和上拉加载更多以及没有数据的显示
- SwipeRefreshLayout配合RecyclerView实现下拉刷新和上拉加载更多以及没有数据的显示
- 仿QQ实现ListView中item的左右滑动同时实现ListView的上拉刷新和下拉加载更多
- 基于iscroll实现下拉和上拉刷新
- Android ListView实现上拉加载更多和下拉刷新功能
- 《React-Native系列》23、 js实现下拉刷新效果（Android和iOS通用）
- 新浪微博、慕课网、美团的、类似qq好友列表黏性下拉刷新风格。多种下拉刷新效果、上拉加载更多、可配置自定义头部广告位
- Android自定义控件实现下拉刷新效果
- 前端实现下拉显示更多功能
- Android ListView下拉与上拉刷新加载更多数据 二
- android开发教程之实现listview下拉刷新和上拉刷新效果
- 使用android自带的下拉刷新效果实现页面下拉刷新功能
- 实现官方下拉刷新,增加自动加载更多
- RecycleView控件的使用(三) 实现上拉加载更多下拉刷新功能
- 安德鲁斯，最直接的方法，实现了上拉刷新下拉加载很多其他的
- 安卓，采用最简单易懂的方式实现上拉刷新下拉加载更多
- Android分组列表悬停显示，分组listView悬停效果，带下拉刷新和上拉加载更多