溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“iscroll上拉刷新效果怎么實(shí)現(xiàn)”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“iscroll上拉刷新效果怎么實(shí)現(xiàn)”文章吧。
注意:只有當(dāng)內(nèi)容超出屏幕區(qū)域才可以上拉刷新呢
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" <!--<link rel="stylesheet" href="css/style.css">--> <!--引入js文件--> <script src="js/jquery.min.js"></script> <script src="js/iscroll.js"></script> <title>上拉加載更多</title> </head> <body> <!--<header>這是頭部</header>--> <!--id為 wrapper 表示這個div是滑動的父窗體--> <div id="wrapper"> <!--scroller 表示這是個可以滑動的控件--> <div class="scroller"> <ul> <li>你就是一個天才</li> <li>你就是一個天才</li> <li>你就是一個天才</li> <li>你就是一個天才</li> <li>你就是一個天才</li> </ul> <!--這是上拉刷新的提示信息,會自動隱藏,樣式完全可以自己定義--> <div class="more"><i class="pull_icon"></i><span>上拉加載...</span></div> </div> </div> <!--<footer>這是底部</footer>--> </body> </html>
要想這個 div可以被滑動,對于 id為 wrapper 的div我們必須加如下的設(shè)置
#wrapper {
width: 100%;/*必須*/
position: absolute;/*必須*/
left: 0;/*必須*/
top: -1rem;/*必須[如果有頭部,可以設(shè)置為頭部的高度]*/
bottom: 0rem;/*必須[如果有底部導(dǎo)航欄,這里可以設(shè)置底部導(dǎo)航欄的高度]*/
overflow: hidden;/*規(guī)定當(dāng)元素內(nèi)部的內(nèi)容超出元素自身的尺寸范圍時應(yīng)該如何來處理*/
z-index: 1;/*層相對于屏幕縱深方向的順序*/
background-color: #ccc;/*背景顏色*/
}注意上拉刷新的顯示等待信息也是個 html 定義,
<!--這是上拉刷新的提示信息,會自動隱藏,樣式完全可以自己定義--> <div class="more"><i class="pull_icon"></i><span>上拉加載...</span></div>
所以我們完全可以定義為我們自己想要的樣式,我定義的如下:這完全是為了好看
<style>#wrapper {
width:100%;/*必須*/
position: absolute;/*必須*/
left:0;/*必須*/
top:1rem;/*必須[如果有頭部,可以設(shè)置為頭部的高度]*/
bottom:0rem;/*必須[如果有底部導(dǎo)航欄,這里可以設(shè)置底部導(dǎo)航欄的高度]*/
overflow: hidden;/*規(guī)定當(dāng)元素內(nèi)部的內(nèi)容超出元素自身的尺寸范圍時應(yīng)該如何來處理*/
z-index:1;/*層相對于屏幕縱深方向的順序*/
background-color:#ccc;/*背景顏色*/
}
#wrapper li {
height:10rem;
line-height:10rem;
text-align: center;
border-bottom:1px solid rgba(0, 0, 0, .1);
}
.more {
height:4rem;
display: flex;
align-items: center;
justify-content: center;
color:#333;
}
.pull_icon {
width:25px;
height:25px;
background-image:url('images/pull.png');
background-repeat: no-repeat;
background-position: center;
background-size:25px;
transition:5s;
}
.more span {
padding-left:5rem;
}
.scroller {
background-color:#fff;
}
.more .flip {
transform:rotate(180deg);
}
.loading {
background-image:url('images/loading.png');
background-repeat: no-repeat;
background-position: center;
background-size:25px;
}
.more .loading {
-webkit-transform:rotate(0deg) translateZ(0);
-webkit-transition-duration:0;
-webkit-animation-name: loading;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}</style><script>
var myscroll = new iScroll("wrapper", {
onScrollMove: function()
if(this.y < (this.maxScrollY)) {
$('.pull_icon').addClass('flip');
$('.pull_icon').removeClass('loading');
$('.more span').text('釋放加載...');
} else {
$('.pull_icon').removeClass('flip loading');
$('.more span').text('上拉加載...')
}
},
//滾動到屏幕底部觸發(fā)此事件
onScrollEnd: function()
if($('.pull_icon').hasClass('flip')) {
$('.pull_icon').addClass('loading');
$('.more span').text('加載中...');
//自己的事件(上拉刷新事件)
pullUpAction();
}
},
onRefresh: function()
$('.more').removeClass('flip');
$('.more span').text('上拉加載...');
}
});
//上拉刷新
function pullUpAction()
setTimeout(function()
//填充數(shù)據(jù)
for(var i = 0; i < 5; i++) {
$('.scroller ul').append("<li>一只將死之猿!</li>");
}
myscroll.refresh();
}, 1000)
}
if($('.scroller').height() < $('#wrapper').height()) {
$('.more').hide();
myscroll.destroy();
}
</script>如果你不想了解細(xì)節(jié),只需要關(guān)注 pullUpAction() 方法的實(shí)現(xiàn)即可,在此填充數(shù)據(jù).
至此一個上拉刷新的功能就完成了.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
<!--<link rel="stylesheet" href="css/style.css">-->
<script src="js/jquery.min.js"></script>
<script src="js/iscroll.js"></script>
<style>#wrapper {
width:100%;/*必須*/
position: absolute;/*必須*/
left:0;/*必須*/
top:1rem;/*必須[如果有頭部,可以設(shè)置為頭部的高度]*/
bottom:0rem;/*必須[如果有底部導(dǎo)航欄,這里可以設(shè)置底部導(dǎo)航欄的高度]*/
overflow: hidden;/*規(guī)定當(dāng)元素內(nèi)部的內(nèi)容超出元素自身的尺寸范圍時應(yīng)該如何來處理*/
z-index:1;/*層相對于屏幕縱深方向的順序*/
background-color:#ccc;/*背景顏色*/
}
#wrapper li {
height:10rem;
line-height:10rem;
text-align: center;
border-bottom:1px solid rgba(0, 0, 0, .1);
}
.more {
height:4rem;
display: flex;
align-items: center;
justify-content: center;
color:#333;
}
.pull_icon {
width:25px;
height:25px;
background-image:url('images/pull.png');
background-repeat: no-repeat;
background-position: center;
background-size:25px;
transition:5s;
}
.more span {
padding-left:5rem;
}
.scroller {
background-color:#fff;
}
.more .flip {
transform:rotate(180deg);
}
.loading {
background-image:url('images/loading.png');
background-repeat: no-repeat;
background-position: center;
background-size:25px;
}
.more .loading {
-webkit-transform:rotate(0deg) translateZ(0);
-webkit-transition-duration:0;
-webkit-animation-name: loading;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}</style>
<title>上拉加載更多</title>
</head>
<body>
<!--<header>這是頭部</header>-->
<!--id為 wrapper 表示這個div是滑動的父窗體-->
<div id="wrapper">
<!--scroller 表示這是個可以滑動的控件-->
<div class="scroller">
<ul>
<li>你就是一個天才</li>
<li>你就是一個天才</li>
<li>你就是一個天才</li>
<li>你就是一個天才</li>
<li>你就是一個天才</li>
</ul>
<!--這是上拉刷新的提示信息,會自動隱藏,樣式完全可以自己定義-->
<div class="more"><i class="pull_icon"></i><span>上拉加載...</span></div>
</div>
</div>
<!--<footer>這是底部</footer>-->
<script>var myscroll = new iScroll("wrapper", {
onScrollMove: function()
if(this.y < (this.maxScrollY)) {
$('.pull_icon').addClass('flip');
$('.pull_icon').removeClass('loading');
$('.more span').text('釋放加載...');
} else {
$('.pull_icon').removeClass('flip loading');
$('.more span').text('上拉加載...')
}
},
//滾動到屏幕底部觸發(fā)此事件
onScrollEnd: function()
if($('.pull_icon').hasClass('flip')) {
$('.pull_icon').addClass('loading');
$('.more span').text('加載中...');
//自己的事件(上拉刷新事件)
pullUpAction();
}
},
onRefresh: function()
$('.more').removeClass('flip');
$('.more span').text('上拉加載...');
}
});
//上拉刷新
function pullUpAction()
setTimeout(function()
//填充數(shù)據(jù)
for(var i = 0; i < 5; i++) {
$('.scroller ul').append("<li>一只將死之猿!</li>");
}
myscroll.refresh();
}, 1000)
}
if($('.scroller').height() < $('#wrapper').height()) {
$('.more').hide();
myscroll.destroy();
}
</script>
</body>
</html>以上就是關(guān)于“iscroll上拉刷新效果怎么實(shí)現(xiàn)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼