您的位置：首页 > Web前端 > JavaScript

iScroll 下拉刷新

2014-03-25 17:40 357 查看

//自己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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： iScroll 下拉刷新 javascript

相关文章推荐

新的分享

章节导航