1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script type="text/javascript" src="./js/iscroll.js"></script>
  6. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  7. <style>
  8. body{
  9. font-family: helvetica;
  10. overflow: hidden;
  11. }
  12. header{
  13. left: 0;
  14. text-shadow: 0px 1px 0px #EBE9E9;
  15. top:0px;
  16. line-height: 48px;
  17. font-size: 30px;
  18. text-align: center;
  19. font-weight: bold;
  20. background-color: brown;
  21. position: absolute;
  22. z-index: 2;
  23. width: 100%;
  24. height: 48px;
  25. }
  26. footer{
  27. left: 0;
  28. background-color: brown;
  29. position: absolute;
  30. z-index: 2;
  31. width: 100%;
  32. height: 48px;
  33. bottom: 0px;
  34. }
  35. #outer{
  36. <!--left:0 这个参数很重要,不然看不到滚动条-->
  37. left:0;
  38. background-color: darkgrey;
  39. overflow: hidden;
  40. top:48px;
  41. bottom:48px;
  42. position: absolute;
  43. z-index: 1;
  44. width: 100%;
  45. /*height: 600px;*/
  46. }
  47. #inner{
  48. position: absolute;
  49. z-index: 1;
  50. width: 100%;
  51. padding: 0px;
  52. -webkit-tap-highlight-color:rgba(0,0,0,0);
  53.  
  54. }
  55. ul{
  56. list-style: none;
  57. margin: 0px;
  58. padding: 0px;
  59. }
  60. li{
  61. height: 40px;
  62. margin: 3px;
  63. background-color: #ffffff;
  64. border-bottom: 1px solid #000000;
  65. border-top: 1px solid gainsboro;
  66. }
  67. #pull-down{
  68. text-align: center;
  69. height: 50px;
  70. line-height: 50px;
  71. color: #ffffff;
  72. font-size: 30px;
  73. font-weight: bold;
  74. }
  75. </style>
  76. <script>
  77. document.addEventListener('DOMContentLoaded',loaded,false);
  78. //$(document).ready(loaded); //在这里,作用跟上一句作用相同,它们之间有区别,想知道去百度
  79. var count = 0;
  80. function pullDown(){
  81. count ++;
  82. console.log(count);
  83. setTimeout(function(){
  84. var html = "";
  85. for(var i=0;i<12;i++){ //新增多少条记录由你决定,改变i的取值范围就行了
  86. html += "<li>新增内容"+count+"</li>"
  87. }
  88. $("ul").prepend(html);
  89. myScroll.refresh(); //重新计算iScroll
  90. },2000)
  91.  
  92. } ;
  93. var myScroll,pullDownEl;
  94. function loaded(){
  95. //检查iScroll和jQuery是否已加载
  96. if(!window.iScroll || !window.jQuery) {
  97. alert("iScroll.js或jQuery.js不存在,请自行下载iScroll.js和jQuery.js同时修改src的值")
  98. }
  99. pullDownEl = $('#pull-down');
  100. myScroll = new iScroll("outer",{
  101. topOffset: 50, //这个是滚动条的起始位置,用于隐藏刷新提示框
  102. onScrollMove: function(){
  103. if(this.y > 5 && !pullDownEl.hasClass('flag')){
  104. pullDownEl.addClass('flag');
  105. this.minScrollY = 0; //这个值是为了看见刷新提示框
  106. }else if(this.y < 5 && pullDownEl.hasClass('flag')){
  107. pullDownEl.removeClass('flag');
  108. this.minScrollY = 50; //隐藏刷新提示框 跟这个参数一样 topOffset: 50
  109. }
  110. },
  111. onScrollEnd:function(){
  112. if(pullDownEl.hasClass('flag')){
  113. pullDownEl.text("正在刷新............");
  114. pullDown();
  115. }
  116. },
  117. onRefresh:function(){
  118. pullDownEl.removeClass('flag');
  119. pullDownEl.text("松手刷新............");
  120. console.log("重新计算列表");
  121. }
  122. }) ;
  123. }
  124. </script>
  125. </head>
  126. <body>
  127. <header>测试下拉刷新</header>
  128. <div id="outer">
  129. <div id="inner">
  130. <div id="pull-down">松手刷新............</div>
  131. <ul>
  132. <li>test1</li>
  133. <li>test2</li>
  134. <li>test3</li>
  135. <li>test4</li>
  136. <li>test5</li>
  137. <li>test6</li>
  138. <li>test7</li>
  139. <li>test8</li>
  140. <li>test9</li>
  141. <li>test10</li>
  142. <li>test11</li>
  143. <li>test12</li>
  144. <li>test13</li>
  145. <li>test14</li>
  146. <li>test15</li>
  147. <li>test16</li>
  148. <li>test17</li>
  149. <li>test18</li>
  150. <li>test19</li>
  151. <li>test20</li>
  152. <li>test21</li>
  153. <li>test22</li>
  154. <li>test23</li>
  155. <li>test24</li>
  156. <li>test25</li>
  157. <li>test26</li>
  158. <li>test27</li>
  159. <li>test28</li>
  160. <li>test29</li>
  161. <li>test30</li>
  162. <li>test31</li>
  163. <li>test32</li>
  164. <li>test33</li>
  165. <li>test34</li>
  166. <li>test35</li>
  167. <li>test36</li>
  168. <li>test37</li>
  169. <li>test38</li>
  170. <li>test39</li>
  171. <li>test40</li>
  172. <li>test41</li>
  173. </ul>
  174. </div>
  175. </div>
  176. <footer></footer>
  177. </body>
  178. </html>

请自行下载 iScroll4和jQuery然后修改一下src的值

iScroll 下拉刷新的更多相关文章

  1. iscroll 下拉刷新，上拉加载

    新手,直接贴代码了 <!DOCTYPE html><html class=""><head lang="en"><me ...

  2. iscroll 下拉刷新功能

    版本号:iscroll4.2.5.js iscroll 版本很有关系  在线: demo链接   有出现白屏的bug,将iscroll版本改成iscroll4.2.5就可以了 html <!DO ...

  3. iscroll.js 下拉刷新和上拉加载

    html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. H5基于iScroll实现下拉刷新，上拉加载更多

    前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...

  5. 基于iscroll.js实现下拉刷新和上拉加载特效

    现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...

  6. 使用iScroll实现上拉或者下拉刷新

    上拉或者下拉刷新的需求在移动端是非常常见的需求,大部分情况下,实现这个效果都使用网上现有的解决方案,例如有人使用swiper这个插件, 也有人使用iScroll这个滚动插件.本文的示例是利用iscro ...

  7. 使用iscroll插件实现下拉刷新功能

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. iscroll实现移动端下拉刷新，上拉加载更多

    js菜鸡-------自我记录 html页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  9. iscroll的下拉刷新，上拉翻页。

    首先对iscroll的scrollTo方法进行稍微修改如下图: 对iscroll滑动到屏幕边缘不能弹回的bug进行修复,如下代码: function scrollbug() { var self = ...

随机推荐

  1. 【HDOJ】3285 Convex Hull of Lattice Points

    凸包模板题目. /* 3285 */ #include <iostream> #include <cstdio> #include <cstring> #inclu ...

  2. Linux&shell之结构化命令

    写在前面:案例.常用.归类.解释说明.(By Jim)使用if-then语句如果命令的退出状态是0(成功执行命令),将执行then后面的所有命令.如果命令的退出状态是0以外的其他值,那么then后面的 ...

  3. SVN项目库错误Unsupported FS format svn: Expected FS format between '1' and '4'; found format '6'

    SVN项目库错误Unsupported FS format svn: Expected FS format between '1' and '4'; found format '6' 从这里找到解决方 ...

  4. Java学习日记-2.3 基本数据类型和对象所占内存空间大小

    转自:http://www.newsmth.net/nForum/#!article/Java/324167

  5. bda_百度百科

    bda_百度百科 bda

  6. Hdu 1856（离散化+并查集）More is better

    题意:一些人遵循朋友的朋友也是朋友原则,现在找出最大的朋友圈, 因为人的编号比较大,但是输入的数据最多是10w行,所以可得出最多也就20w人,所以可以进行一下离散化处理,这样数据就会毫无压力 //// ...

  7. jQuery中bind,live,delegate与one方法的用法及区别解析

    bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象. .bind(eventType[, evnetData], Handler(eventObject)) 其中,参 ...

  8. Ajax之 beforeSend和complete longind制作

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; min-height: 18.0px } p.p2 { margin: 0 ...

  9. C++ —— 编译程序

    目录: 0.GCC online documentation 1.gcc编译器 常用命令 2.VC编译器  常用参数说明 3.C预处理器命令说明 4.debug 和 release 的区别 0.GCC ...

  10. JS~字符串长度判断，超出进行自动截取（支持中文）

    今天一个小弟问我的问题,在文本框中输入字符,如果超出指定长度,就把它截取,要求中文等于两个字符的长度,我找一下资料,把这个功能实现了,下面是JS代码: <html> <script ...