<!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="./js/iscroll.js"></script> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.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; 100%; height: 48px; } footer{ left: 0; background-color: brown; position: absolute; z-index: 2; 100%; height: 48px; bottom: 0px; } #outer{ <!--left:0 这个参数很重要,不然看不到滚动条--> left:0; background-color: darkgrey; overflow: hidden; top:48px; bottom:48px; position: absolute; z-index: 1; 100%; /*height: 600px;*/ } #inner{ position: absolute; z-index: 1; 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>
请自行下载 iScroll4和jQuery然后修改一下src的值