本节知识点
- 知识概况
代码
<!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>
要想滚动到某一个位置
scrollTo(x,y,time,relative)
scrollToElement(ele,time)
snapToPage(pagex,pageY,time)
2018-02-24_075730.jpg
