一切之前還是忍不住要罵一下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/[email protected]) 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/[email protected]) 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>
