IScroll上拉加載下拉刷新
<html>
<head>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">
<title>IScroll上拉加載下拉刷新</title>
<style type="text/css">
@charset "utf-8";
*{margin: 0; padding: 0;}
html,body{
width:100%;
height:100%;
font-size:1rem;
background:#f7f7f8;
position:relative;
max-width:480px;
margin:0 auto;
font-family:-apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
ul,li {
list-style:none;
}
.a{
height: 100px;
width: 100%;
background: blue;
}
#wrapper{
width: 100%;
overflow: hidden;
position: absolute;
top: 0px;
bottom: 0px;
}
#top{
position: absolute;
top: -60px;
transform: ;
height: 60px;
width: 100%;
background: #ccc;
text-align: center;
line-height: 60px;
}
#bottom{
text-align: center;
line-height: 40px;
height: 40px;
width: 100%;
background: #ccc;
}
#scroller{
position: relative;
}
</style>
</head>
</head>
<body>
<div id="wrapper">
<div id="scroller">
<div id="top">
下拉刷新
</div>
<div id="box">
<ul id="boxUl">
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
</ul>
<div id="bottom">
上拉加載
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/iscroll.js" ></script>
<script>
$(function(){
myScroll = new IScroll("#wrapper",{mouseWheel:true,click:true,})
$(".a:even").css("background","#f40");
$("#wrapper").on("touchend",function(){
if(myScroll.y>50){
$("#scroller").css("top","60px");
$("#top").html("正在刷新");
console.log("刷新")
setTimeout(function(){$("#scroller").animate({"top":"0px"});$("#top").html("下拉刷新");},1000);
}
if(myScroll.y<myScroll.maxScrollY-2){
$("#bottom").html("正在加載");
setTimeout(function(){
for(var i=0;i<3;i++ ){
$("#boxUl").append('<li class="a"></li>');
};
myScroll.refresh();
$(".a:even").css("background","#f40");
$("#bottom").html("上拉加載")
},1000);
}
})
})
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章