iScroll5实现上拉加载下拉刷新_iscroll5 上拉加载下拉刷新-CSDN博客

本文链接：https://blog.csdn.net/G_woo/article/details/78416228

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>iscroll Demo</title>
<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%;
}
.zns-loading{
position: fixed;
z-index: 1000;
width:100%;
height: 100%;
justify-content: center;
align-items: center;
display: none;
}
.zns-loading-inner{
display:flex;
display: flex;
height: 100px;
align-items: center;
justify-content: center;
}
@-webkit-keyframes ball-spin-fade-loader {
50% {
opacity: 0.3;
-webkit-transform: scale(0.4);
transform: scale(0.4); }

100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }

@keyframes ball-spin-fade-loader {
50% {
opacity: 0.3;
-webkit-transform: scale(0.4);
transform: scale(0.4); }

100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }

.ball-spin-fade-loader {
position: relative;
}
.ball-spin-fade-loader > div:nth-child(1) {
top: 25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
animation: ball-spin-fade-loader 1s 0s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(2) {
top: 17.04545px;
left: 17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
animation: ball-spin-fade-loader 1s 0.12s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(3) {
top: 0;
left: 25px;
-webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
animation: ball-spin-fade-loader 1s 0.24s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(4) {
top: -17.04545px;
left: 17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
animation: ball-spin-fade-loader 1s 0.36s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(5) {
top: -25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
animation: ball-spin-fade-loader 1s 0.48s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(6) {
top: -17.04545px;
left: -17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
animation: ball-spin-fade-loader 1s 0.6s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(7) {
top: 0;
left: -25px;
-webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
animation: ball-spin-fade-loader 1s 0.72s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(8) {
top: 17.04545px;
left: -17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
animation: ball-spin-fade-loader 1s 0.84s infinite linear;
}
.ball-spin-fade-loader > div {
background-color: #5477b2;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
</style>
</head>
<body οnlοad="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 class="zns-loading">
<div class="zns-loading-inner">
<div class="ball-spin-fade-loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div id="footer"></div>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="build/iscroll-probe.js"></script>
<script type="text/javascript">

function load () {
var myScroll,
pullDown = $("#pullDown"),
pullUp = $("#pullUp"),
pullDownLabel = $(".pullDownLabel"),
pullUpLabel = $(".pullUpLabel"),
container = $('#list'),
loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为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("松手刷新数据");
loadingStep = 1;
myScroll.refresh();
}else if(this.y < (this.maxScrollY - 80)){//上拉加载更多
pullUp.addClass("refresh").show();
pullUpLabel.text("正在载入");
loadingStep = 1;
}
}
});
myScroll.on("scrollEnd",function(){
if(loadingStep == 1){
if( pullDown.attr("class").match("refresh") ){//下拉刷新操作
pullDown.removeClass("refresh").addClass("loading");
pullDownLabel.text("正在刷新");
loadingStep = 2;
$(".zns-loading").css("display","flex")
pullDownAction();
} else if( pullUp.attr("class").match("refresh") ){
$(".zns-loading").css("display","flex")
pullUpAction();
}
}
});

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();
setTimeout(function(){
$(".zns-loading").css("display","none")
myScroll.refresh();
},0)
loadingStep = 0;
$(".pulldown-tips").show();
},1000);
}
function pullUpAction(){
$(".zns-loading").css("display","flex")
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();
setTimeout(function(){
$(".zns-loading").css("display","none")
myScroll.refresh();
},0)
loadingStep = 0;
},1000);
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
}


</script>
</body>
</html>