IScroll5實現(xiàn)下拉刷新上拉加載的功能實例
更新時間：2017年08月11日 08:26:33 作者：快進(jìn)小樹林
本篇文章主要介紹了IScroll5實現(xiàn)下拉刷新上拉加載的功能實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
聲明：雖然本文章為原創(chuàng)，但是很大部分參考了博客園博主MRxia的一篇iscroll的下拉刷新的實現(xiàn)方式，我個人把demo簡化了一下。
實現(xiàn)效果：類似網(wǎng)易新聞加載新聞列表（好吧，我的只能算是基礎(chǔ)版，如要添加動圖或者css樣式或者canvas效果請自行腦補）
外部引入js文件，必須是iscroll-probe.js，這點是很重要的，因為基礎(chǔ)版的 iscroll.js 插件并不支持實例化的IScroll對象的on事件綁定，當(dāng)然還是要引入jQuery簡化一下開發(fā)
以下是全局的css樣式，當(dāng)然你也可以直接復(fù)制過去，前面的是默認(rèn)的iscroll的demo的樣式，后面的pulldown-tips樣式是作為絕對定位，當(dāng)用戶下拉不超過40px時顯示“下拉刷新”的提示，下拉刷新后會被隱藏起來
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body,ul,li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
overflow: hidden; /* this is important to prevent the whole page to bounce */
}
#header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background: #CD235C;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
font-weight: bold;
}
#footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
background: #444;
padding: 0;
border-top: 1px solid #444;
}
#wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #ccc;
overflow: hidden;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}
#scroller li {
padding: 0 10px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
}
#pullDown,#pullUp,.pulldown-tips{
height:40px;
line-height:40px;
text-align:center;
}
.pulldown-tips{
position:absolute;
top:-40px;
left:0;
width:100%;
}
</style>
html結(jié)構(gòu)在默認(rèn)demo的基礎(chǔ)上在scoller里面添加刷新/加載數(shù)據(jù)提示
<body onload="load()">
<div id="header">iScroll</div>
<div id="wrapper">
<div id="scroller">
<div id="pullDown" class=""><div class="pullDownLabel"></div></div>
<div class="pulldown-tips">下拉刷新</div>
<ul id="list">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 11</li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
<li>Pretty row 16</li>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
<li>Pretty row 19</li>
<li>Pretty row 20</li>
</ul>
<div id="pullUp" class="">
<div class="pullUpLabel">加載更多</div>
</div>
</div>
</div>
<div id="footer"></div>
</body>
js需要說明的是，這里的scroll事件當(dāng)然不是原生dom的scroll事件，而是IScroll對象的滾動事件，類似touchmove事件，scrollEnd事件也類似touchend事件，在滾動結(jié)束后執(zhí)行
<script type="text/javascript">
function load () {
var myScroll,
pullDown = $("#pullDown"),
pullUp = $("#pullUp"),
pullDownLabel = $(".pullDownLabel"),
pullUpLabel = $(".pullUpLabel"),
container = $('#list'),
loadingStep = 0;//加載狀態(tài)0默認(rèn)，1顯示加載狀態(tài)，2執(zhí)行加載數(shù)據(jù)，只有當(dāng)為0時才能再次加載，這是防止過快拉動刷新
pullDown.hide();
pullUp.hide();
myScroll = new IScroll("#wrapper", {
scrollbars: true,
mouseWheel: false,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true,
scrollY:true,
probeType: 2,
bindToWrapper:true
});
myScroll.on("scroll",function(){
if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh')){
if(this.y > 40){//下拉刷新操作
$(".pulldown-tips").hide();
pullDown.addClass("refresh").show();
pullDownLabel.text("松手刷新數(shù)據(jù)");
loadingStep = 1;
myScroll.refresh();
}else if(this.y < (this.maxScrollY - 14)){//上拉加載更多
pullUp.addClass("refresh").show();
pullUpLabel.text("正在載入");
loadingStep = 1;
pullUpAction();
}
}
});
myScroll.on("scrollEnd",function(){
if(loadingStep == 1){
if( pullDown.attr("class").match("refresh") ){//下拉刷新操作
pullDown.removeClass("refresh").addClass("loading");
pullDownLabel.text("正在刷新");
loadingStep = 2;
pullDownAction();
}
}
});
function pullDownAction(){
setTimeout(function(){
var li, i;
for (i = 0,li = ""; i < 3; i++) {
li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";
}
container.prepend(li);
pullDown.attr('class','').hide();
myScroll.refresh();
loadingStep = 0;
$(".pulldown-tips").show();
},1000);
}
function pullUpAction(){
setTimeout(function(){
var li, i;
for (i = 0,li = ""; i < 3; i++) {
li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";
}
container.append(li);
pullUp.attr('class','').hide();
myScroll.refresh();
loadingStep = 0;
},1000);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
}
</script>
如有出錯，歡迎指正 PS：測試環(huán)境在firefox的響應(yīng)式開發(fā)環(huán)境下運行
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS創(chuàng)建Tag標(biāo)簽的方法,結(jié)合具體實例形式分析了javascript動態(tài)操作頁面HTML元素實現(xiàn)tag標(biāo)簽功能的步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
連連看游戲通常情況下都是使用html5來實現(xiàn)的，不過從現(xiàn)在開始就可以使用js來實現(xiàn)了，具體的代碼如下，喜歡的朋友可以參考下，希望對大家有所幫助2013-09-09
javascript實現(xiàn)日期格式轉(zhuǎn)換
這篇文章主要介紹了javascript實現(xiàn)日期格式轉(zhuǎn)換，非常的簡單實用，項目中經(jīng)?？梢杂玫?，這里推薦給大家2014-12-12
JS 如果改變span標(biāo)簽的是否隱藏屬性,大家根據(jù)需要選擇使用。2011-10-10
這篇文章主要介紹了JS實現(xiàn)直接運行html代碼的方法,涉及javascript窗口操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)的詳細(xì)教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
下面小編就為大家?guī)硪黄褂胘s獲取地址欄參數(shù)的方法推薦(超級簡單)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
js保留兩位小數(shù)使用toFixed實現(xiàn)
直接使用Math.round(x*100)存在一個問題，有時會有很小的誤差，顯示很多位的小數(shù)位，如0.9996*100，就會變成99.96000000000001，我想要的在下面，感興趣的朋友可以參考下哈2013-07-07
這篇文章主要介紹了js的image onload事件使用遇到的問題,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了JS如何循環(huán)遍歷JSON數(shù)據(jù)的方法,本文提供了 JS 循環(huán) JSON 數(shù)據(jù)列,以及 JS 循環(huán)遍歷 JSON 數(shù)據(jù)的例子,需要的朋友可以參考下2024-01-01