iscroll 上拉刷新極簡入門案例


iscroll 上拉刷新極簡入門案例

  • 注意:只有當內容超出屏幕區域才可以上拉刷新呢

這里寫圖片描述

演示

這里寫圖片描述

使用步驟

1:編寫html頁面,並引入相應js文件

<!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我們必須加如下的設置


#wrapper {
width: 100%;/*必須*/
position: absolute;/*必須*/
left: 0;/*必須*/
top: -1rem;/*必須[如果有頭部,可以設置為頭部的高度]*/
bottom: 0rem;/*必須[如果有底部導航欄,這里可以設置底部導航欄的高度]*/
overflow: hidden;/*規定當元素內部的內容超出元素自身的尺寸范圍時應該如何來處理*/
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;/*必須[如果有頭部,可以設置為頭部的高度]*/
bottom: 0rem;/*必須[如果有底部導航欄,這里可以設置底部導航欄的高度]*/
overflow: hidden;/*規定當元素內部的內容超出元素自身的尺寸范圍時應該如何來處理*/
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: all .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>

2: 初始化 iscroll.js

<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('上拉加載...')
}
},
//滾動到屏幕底部觸發此事件
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() {
//填充數據
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>

如果你不想了解細節,只需要關注 pullUpAction() 方法的實現即可,在此填充數據.

至此一個上拉刷新的功能就完成了.

完整頁面布局:

<!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;/*必須[如果有頭部,可以設置為頭部的高度]*/
bottom: 0rem;/*必須[如果有底部導航欄,這里可以設置底部導航欄的高度]*/
overflow: hidden;/*規定當元素內部的內容超出元素自身的尺寸范圍時應該如何來處理*/
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: all .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('上拉加載...')
}
},
//滾動到屏幕底部觸發此事件
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() {
//填充數據
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>

demo地址 https://github.com/itguang/iscroll-demo

更多

具體配置信息請去官網查看.


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com