基于iscroll.js的上拉刷新和下拉加载
2017-10-30 本文已影响0人
星球小霸王
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no">
<title>Document</title>
<script src="http://47.93.227.112/iscroll/iscroll.Veb.js"></script>
<style>
*{
padding:0;
margin:0;
}
.box{
position:absolute;
top:0;
bottom:0;
width: 100%;
}
h2{
text-align:center;
background:#ccc;
}
li{
width: 100%;
line-height:40px;
border-bottom:1px solid gray;
list-style: none;
text-align:center;
}
.freshTop,.freshBottom{
width: 100%;
height: 60px;
padding-bottom:10px;
text-align:center;
}
.freshTop p,.freshBottom p{
height: 20px;
font-size:12px;
line-height:20px;
padding:5px 0;
}
.freshTop img,.freshBottom img{
height: 30px;
margin-right:10px;
}
.freshTop .active,.freshBottom .active{
-webkit-animation: mescrollRotate .6s linear infinite;
animation: mescrollRotate .6s linear infinite;
}
@-webkit-keyframes mescrollRotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes mescrollRotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
#xz{
background: gray;
height: 20px;
width: 100%;
text-align:center;
position:absolute;
top:-20px;
transition:all 0.6s;
display: none;
}
</style>
</head>
<body>
<div class="box" id="view">
<div class="con">
<p id="xz">asdfasf</p>
<div class="freshTop">
<p id="w">下拉刷新</p>
<imgaaaaaaaa class="mescroll-progress" src="http://47.93.227.112/iscroll/mescroll-progress.png" alt="" id="sx"/>
<imgaaaaaaaa class="mescroll-slogan" src="http://47.93.227.112/iscroll/mescroll-slogan.png" alt="" />
</div>
<h2>頭部</h2>
<ul id="nr">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
<li>内容6</li>
<li>内容7</li>
<li>内容8</li>
<li>内容9</li>
<li>内容10</li>
<li>内容10</li>
<li>内容10</li>
<li>内容10</li>
<li>内容10</li>
<li>内容10</li>
<li>内容10</li>
<li>内容10</li>
<li>内容10</li>
<li>内容10</li>
<li>内容10</li>
</ul>
<div class="freshBottom">
<p id="x">上拉加载</p>
<imgaaaaaaaa class="mescroll-progress" src="http://47.93.227.112/iscroll/mescroll-progress.png" alt="" id="png"/>
<imgaaaaaaaa class="mescroll-slogan" src="http://47.93.227.112/iscroll/mescroll-slogan.png" alt="" />
</div>
</div>
</div>
<script>
var rotate = document.getElementsByTagName("img")[0];
var flag = true;
var index = 0;
var view = new iScroll("view",{
y:-60,
topOffset:60,
// bounce:false,
onScrollMove:function(){
rotate.style.transform = "rotate("+(this.y+60)*5+"deg)";
//下拉刷新
if(this.y>0){
w.innerHTML = "释放刷新";
/*
this.minScrollY代表的是初始页面顶部距离视口的高度
*/
this.minScrollY = 0;//最小回弹值;
}else{
w.innerHTML = "下拉刷新";
this.minScrollY = -60;
}
//上拉加载
if(this.y-300<this.maxScrollY){
/*
this.maxScrollY代表的是页面滚动到底部之后,卷出去的值
即：视口的高度减去页面的高度
*/
//触发上拉加载
if(flag){
flag = false;
x.innerHTML = "正在加载"
png.className += " active"
setTimeout(function(){
for(var i=0;i<5;i++){
var node = document.createElement("li");
node.innerHTML = "新增的内容";
nr.appendChild(node)
}
flag = true
view.refresh();
png.className=png.className.replace(" active","")
},2000)
}
}
},
onTouchEnd:function(){
if(this.y>0){
index++;
w.innerHTML = "正在刷新"
sx.className += " active"
setTimeout(function(){
var node = document.createElement("li");
node.innerHTML = "新增的第"+index+"条内容";
var li = document.getElementsByTagName("li")[0]
nr.insertBefore(node,li)
view.refresh();
sx.className=sx.className.replace(" active","")
},2000)
}
}
})
</script>
</body>
</html>
