iScroll 下拉刷新

最新推荐文章于 2021-11-12 21:20:57 发布

原创最新推荐文章于 2021-11-12 21:20:57 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iScroll #下拉刷新 #javascript

web前端专栏收录该内容

10 篇文章

订阅专栏

//自己iScroll刷新,样式比较拙,想试试效果的弟兄请自行下载 iScroll4和jQuery然后修改一下src的值

一下是完整html和js代码,如有不明白可以加我qq:40466911问我,一起研究

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../lib/iscroll.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<style>
body{
font-family: helvetica;
overflow: hidden;
}
header{
left: 0;
text-shadow: 0px 1px 0px #EBE9E9;
top:0px;
line-height: 48px;
font-size: 30px;
text-align: center;
font-weight: bold;
background-color: brown;
position: absolute;
z-index: 2;
width: 100%;
height: 48px;
}
footer{
left: 0;
background-color: brown;
position: absolute;
z-index: 2;
width: 100%;
height: 48px;
bottom: 0px;
}
#outer{

left:0;
background-color: darkgrey;
overflow: hidden;
top:48px;
bottom:48px;
position: absolute;
z-index: 1;
width: 100%;
/*height: 600px;*/
}
#inner{
position: absolute;
z-index: 1;
width: 100%;
padding: 0px;
-webkit-tap-highlight-color:rgba(0,0,0,0);

}
ul{
list-style: none;
margin: 0px;
padding: 0px;
}
li{
height: 40px;
margin: 3px;
background-color: #ffffff;
border-bottom: 1px solid #000000;
border-top: 1px solid gainsboro;
}
#pull-down{
text-align: center;
height: 50px;
line-height: 50px;
color: #ffffff;
font-size: 30px;
font-weight: bold;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',loaded,false);
//$(document).ready(loaded); //在这里,作用跟上一句作用相同,它们之间有区别,想知道去百度
var count = 0;
function pullDown(){
count ++;
console.log(count);
setTimeout(function(){
var html = "";
for(var i=0;i<12;i++){ //新增多少条记录由你决定,改变i的取值范围就行了
html += "<li>新增内容"+count+"</li>"
}
$("ul").prepend(html);
myScroll.refresh(); //重新计算iScroll
},2000)

} ;
var myScroll,pullDownEl;
function loaded(){
//检查iScroll和jQuery是否已加载
if(!window.iScroll || !window.jQuery) {
alert("iScroll.js或jQuery.js不存在,请自行下载iScroll.js和jQuery.js同时修改src的值")
}
pullDownEl = $('#pull-down');
myScroll = new iScroll("outer",{
topOffset: 50, //这个是滚动条的起始位置,用于隐藏刷新提示框
onScrollMove: function(){
if(this.y > 5 && !pullDownEl.hasClass('flag')){
pullDownEl.addClass('flag');
this.minScrollY = 0; //这个值是为了看见刷新提示框
}else if(this.y < 5 && pullDownEl.hasClass('flag')){
pullDownEl.removeClass('flag');
this.minScrollY = 50; //隐藏刷新提示框跟这个参数一样 topOffset: 50
}
},
onScrollEnd:function(){
if(pullDownEl.hasClass('flag')){
pullDownEl.text("正在刷新............");
pullDown();
}
},
onRefresh:function(){
pullDownEl.removeClass('flag');
pullDownEl.text("松手刷新............");
console.log("重新计算列表");
}
}) ;
}
</script>
</head>
<body>
<header>测试下拉刷新</header>
<div id="outer">
<div id="inner">
<div id="pull-down">松手刷新............</div>
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
<li>test6</li>
<li>test7</li>
<li>test8</li>
<li>test9</li>
<li>test10</li>
<li>test11</li>
<li>test12</li>
<li>test13</li>
<li>test14</li>
<li>test15</li>
<li>test16</li>
<li>test17</li>
<li>test18</li>
<li>test19</li>
<li>test20</li>
<li>test21</li>
<li>test22</li>
<li>test23</li>
<li>test24</li>
<li>test25</li>
<li>test26</li>
<li>test27</li>
<li>test28</li>
<li>test29</li>
<li>test30</li>
<li>test31</li>
<li>test32</li>
<li>test33</li>
<li>test34</li>
<li>test35</li>
<li>test36</li>
<li>test37</li>
<li>test38</li>
<li>test39</li>
<li>test40</li>
<li>test41</li>
</ul>
</div>
</div>
<footer></footer>
</body>
</html>