iscroll 上拉加载和下拉刷新
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/jquery.min.js"></script>
<script src="js/iscroll.js"></script>
</head>
<style>
*{margin:0px;padding:0px;}
ul{list-style-type:none;}
html,body{width:100%;height:100%;}
header{width:100%;height:10%;text-align:center;line-height:50px;background:black;color:white;font-size:12px;}
footer{width:100%;height:10%;text-align:center;line-height:50px;background:black;color:white;font-size:12px;}
.box{width:100%;height:80%;overflow:hidden;}
#wrap{width:100%;height:auto;}
.shuaxin{width:100%;height:20px;text-align:center;background:#ccc;color:black;display:none;}
#wrap li{width:100%;line-height:150px;color:yellow;background:blue;text-align:center;border-bottom:1px dashed yellow;}
.jiazai{width:100%;height:20px;text-align:center;background:#ccc;color:black;display:none;}
</style>
<body>
<header>这个就是测试上拉加载和下拉刷新</header>
<div class="shuaxin">你在下拉刷新</div>
<div class="box">
<ul id="wrap">
<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>
</ul>
</div>
<div class="jiazai">你是在上拉加载</div>
<footer>这个就是底部</footer>
</body>
<script>
$(function(){
var myscroll = new IScroll('.box');
$(document).on("touchend",function(){
console.log(myscroll.y);
if(myscroll.y==0)
{
$(".shuaxin").hide();
}
if(myscroll.y==myscroll.maxScrollY)
{
$(".jiazai").hide();
}
myscroll.refresh();
});
$(document).on("touchmove",function(){
console.log(myscroll.y);
if(myscroll.y>20)
{
$(".shuaxin").show();
}
if(myscroll.y<myscroll.maxScrollY-20)
{
$(".jiazai").show();
}
})
})
</script>
</html>
p.s. 记得引入JQ和iscroll.js
参考链接：https://www.jianshu.com/p/e6127f1e654f
标签：width,color,myscroll,100%,height,iscroll,上拉,text,加载 来源： https://www.cnblogs.com/haqiao/p/11308038.html