iscroll5 上下拉动刷新

在这我不想说其他写的如何如何，虽然本人不是很会css3，但是修改倒是没问题网上说的iscroll5全改了从4升级5要改动内部代码。

我了个神，修改别人的ok的源码万一哪天又要更谁知道你改的那个。

这个iscroll5的示例包本身就不用改，就能支持上下拉动刷新只不过导入的不是基础的iscroll.js，导入的是iscroll-probe.js

我这里用的jquery是1.8 至于css什么的别关心了，只是把别人写好的拿来改改增强用户体验而已。别说什么

topOffset 这个属性没有什么的，我这就ok。

网上写的拉动刷新是由bug的，当拉动后在快速接着拉动，这时候会执行两次刷新方法和动画我这里解决了这问题

当然我试过修改isScroll.options.xxx属性想禁止滚动。等待我开启滚动。

记住导入isScroll5的js是iscroll-probe.js

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. var myScroll;  
  2.       var pullDownEl, pullDownL;  
  3.       var pullUpEl, pullUpL;  
  4.       var Downcount = 0 ,Upcount = 0;  
  5.       var loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新  
  6.       function pullDownAction() {//下拉事件  
  7.             setTimeout(function() {  
  8.                 var el, li, i;  
  9.             el = $('#add');  
  10.             for (i = 0; i < 3; i++) {  
  11.                 li = $("<li></li>");  
  12.                 Downcount++;  
  13.                 li.text('new Add ' + Downcount + " ！");  
  14.                 el.prepend(li);  
  15.             }  
  16.             pullDownEl.removeClass('loading');  
  17.             pullDownL.html('下拉显示更多...');  
  18.             pullDownEl['class'] = pullDownEl.attr('class');  
  19.             pullDownEl.attr('class','').hide();  
  20.             myScroll.refresh();  
  21.             loadingStep = 0;  
  22.         }, 1000); //1秒  
  23.       }  
  24.       function pullUpAction() {//上拉事件  
  25.         setTimeout(function() {  
  26.             var el, li, i;  
  27.             el = $('#add');  
  28.             for (i = 0; i < 3; i++) {  
  29.                 li = $("<li></li>");  
  30.                 Upcount++;  
  31.                 li.text('new Add ' + Upcount + " ！");  
  32.                 el.append(li);  
  33.             }  
  34.             pullUpEl.removeClass('loading');  
  35.             pullUpL.html('上拉显示更多...');  
  36.             pullUpEl['class'] = pullUpEl.attr('class');  
  37.             pullUpEl.attr('class','').hide();  
  38.             myScroll.refresh();  
  39.             loadingStep = 0;  
  40.         }, 1000);  
  41.       }  
  42.   
  43.       function loaded() {  
  44.         pullDownEl = $('#pullDown');  
  45.         pullDownL = pullDownEl.find('.pullDownLabel');  
  46.         pullDownEl['class'] = pullDownEl.attr('class');  
  47.         pullDownEl.attr('class','').hide();  
  48.           
  49.         pullUpEl = $('#pullUp');  
  50.         pullUpL = pullUpEl.find('.pullUpLabel');  
  51.         pullUpEl['class'] = pullUpEl.attr('class');  
  52.         pullUpEl.attr('class','').hide();  
  53.           
  54.         myScroll = new IScroll('#content', {  
  55.             probeType: 2,//probeType：1对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。probeType：2总执行滚动，除了势头，反弹过程中的事件。这类似于原生的onscroll事件。probeType：3发出的滚动事件与到的像素精度。注意，滚动被迫requestAnimationFrame（即：useTransition：假）。  
  56.             scrollbars: true,//有滚动条  
  57.             mouseWheel: true,//允许滑轮滚动  
  58.             fadeScrollbars: true,//滚动时显示滚动条，默认影藏，并且是淡出淡入效果  
  59.             bounce:true,//边界反弹  
  60.             interactiveScrollbars:true,//滚动条可以拖动  
  61.             shrinkScrollbars:'scale',// 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.  
  62.             click: true ,// 允许点击事件  
  63.             keyBindings:true,//允许使用按键控制  
  64.             momentum:true// 允许有惯性滑动  
  65.         });  
  66.         //滚动时  
  67.         myScroll.on('scroll', function(){  
  68.             if(loadingStep == 0 && !pullDownEl.attr('class').match('flip|loading') && !pullUpEl.attr('class').match('flip|loading')){  
  69.             if (this.y > 5) {  
  70.                 //下拉刷新效果  
  71.                 pullDownEl.attr('class',pullUpEl['class'])  
  72.                 pullDownEl.show();  
  73.                 myScroll.refresh();  
  74.                 pullDownEl.addClass('flip');  
  75.                 pullDownL.html('准备刷新...');  
  76.                 loadingStep = 1;  
  77.             }else if (this.y < (this.maxScrollY - 5)) {  
  78.                 //上拉刷新效果  
  79.                 pullUpEl.attr('class',pullUpEl['class'])  
  80.                 pullUpEl.show();  
  81.                 myScroll.refresh();  
  82.                 pullUpEl.addClass('flip');  
  83.                 pullUpL.html('准备刷新...');  
  84.                 loadingStep = 1;  
  85.             }  
  86.             }  
  87.         });  
  88.         //滚动完毕  
  89.         myScroll.on('scrollEnd',function(){  
  90.             if(loadingStep == 1){  
  91.             if (pullUpEl.attr('class').match('flip|loading')) {  
  92.                     pullUpEl.removeClass('flip').addClass('loading');  
  93.                 pullUpL.html('Loading...');  
  94.                 loadingStep = 2;  
  95.                     pullUpAction();  
  96.             }else if(pullDownEl.attr('class').match('flip|loading')){  
  97.                 pullDownEl.removeClass('flip').addClass('loading');  
  98.                 pullDownL.html('Loading...');  
  99.                 loadingStep = 2;  
  100.                 pullDownAction();  
  101.             }  
  102.             }  
  103.         });  
  104.       }  
  105.   
  106.   
  107.       document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);  










css,还是原封不动的







[css] view plaincopy在CODE上查看代码片派生到我的代码片

 






    

  1. * {  
    2. 

  2.     -webkit-box-sizing: border-box;  
    3. 

  3.     -moz-box-sizing: border-box;  
    4. 

  4.     box-sizing: border-box;  
    5. 

  5. }  
    6. 

  6.   
    7. 

  7. html {  
    8. 

  8.     -ms-touch-action: none;  
    9. 

  9. }  
    10. 

  10.   
    11. 

  11. body,ul,li {  
    12. 

  12.     padding: 0;  
    13. 

  13.     margin: 0;  
    14. 

  14.     border: 0;  
    15. 

  15. }  
    16. 

  16.   
    17. 

  17. body {  
    18. 

  18.     font-size: 12px;  
    19. 

  19.     font-family: ubuntu, helvetica, arial;  
    20. 

  20.     overflow: hidden;  
    21. 

  21.     /* this is important to prevent the whole page to bounce */  
    22. 

  22. }  
    23. 

  23.   
    24. 

  24. #header {  
    25. 

  25.     position: absolute;  
    26. 

  26.     z-index: 2;  
    27. 

  27.     top: 0;  
    28. 

  28.     left: 0;  
    29. 

  29.      100%;  
    30. 

  30.     height: 45px;  
    31. 

  31.     line-height: 45px;  
    32. 

  32.     background: #CD235C;  
    33. 

  33.     padding: 0;  
    34. 

  34.     color: #eee;  
    35. 

  35.     font-size: 20px;  
    36. 

  36.     text-align: center;  
    37. 

  37.     font-weight: bold;  
    38. 

  38. }  
    39. 

  39.   
    40. 

  40. #footer {  
    41. 

  41.     position: absolute;  
    42. 

  42.     z-index: 2;  
    43. 

  43.     bottom: 0;  
    44. 

  44.     left: 0;  
    45. 

  45.      100%;  
    46. 

  46.     height: 48px;  
    47. 

  47.     background: #444;  
    48. 

  48.     padding: 0;  
    49. 

  49.     border-top: 1px solid #444;  
    50. 

  50. }  
    51. 

  51.   
    52. 

  52. #content {  
    53. 

  53.     position: absolute;  
    54. 

  54.     z-index: 1;  
    55. 

  55.     top: 45px;  
    56. 

  56.     bottom: 48px;  
    57. 

  57.     left: 0;  
    58. 

  58.      100%;  
    59. 

  59.     background: #ccc;  
    60. 

  60.     overflow: hidden;  
    61. 

  61. }  
    62. 

  62.   
    63. 

  63. #scroller {  
    64. 

  64.     position: absolute;  
    65. 

  65.     z-index: 1;  
    66. 

  66.     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
    67. 

  67.      100%;  
    68. 

  68.     -webkit-transform: translateZ(0);  
    69. 

  69.     -moz-transform: translateZ(0);  
    70. 

  70.     -ms-transform: translateZ(0);  
    71. 

  71.     -o-transform: translateZ(0);  
    72. 

  72.     transform: translateZ(0);  
    73. 

  73.     -webkit-touch-callout: none;  
    74. 

  74.     -webkit-user-select: none;  
    75. 

  75.     -moz-user-select: none;  
    76. 

  76.     -ms-user-select: none;  
    77. 

  77.     user-select: none;  
    78. 

  78.     -webkit-text-size-adjust: none;  
    79. 

  79.     -moz-text-size-adjust: none;  
    80. 

  80.     -ms-text-size-adjust: none;  
    81. 

  81.     -o-text-size-adjust: none;  
    82. 

  82.     text-size-adjust: none;  
    83. 

  83. }  
    84. 

  84.   
    85. 

  85. #scroller ul {  
    86. 

  86.     list-style: none;  
    87. 

  87.     padding: 0;  
    88. 

  88.     margin: 0;  
    89. 

  89.      100%;  
    90. 

  90.     text-align: left;  
    91. 

  91. }  
    92. 

  92.   
    93. 

  93. #scroller li {  
    94. 

  94.     padding: 0 10px;  
    95. 

  95.     height: 40px;  
    96. 

  96.     line-height: 40px;  
    97. 

  97.     border-bottom: 1px solid #ccc;  
    98. 

  98.     border-top: 1px solid #fff;  
    99. 

  99.     background-color: #fafafa;  
    100. 

  100.     font-size: 14px;  
    101. 

  101. }  
    102. 

  102. #pullDown,#pullUp {    
    103. 

  103.     height: 40px;    
    104. 

  104.     line-height: 40px;    
    105. 

  105.     padding: 5px 10px;    
    106. 

  106.     font-weight: bold;    
    107. 

  107.     font-size: 14px;    
    108. 

  108.     color: #888;    
    109. 

  109. }    
    110. 

  110.     
    111. 

  111. #pullDown .pullDownIcon,#pullUp .pullUpIcon {    
    112. 

  112.     display: block;    
    113. 

  113.     float: left;    
    114. 

  114.      40px;    
    115. 

  115.     height: 40px;    
    116. 

  116.     background: url(img/pull-icon@2x.png) 0 0 no-repeat;    
    117. 

  117.     -webkit-background-size: 40px 80px;    
    118. 

  118.     background-size: 40px 80px;    
    119. 

  119.     -webkit-transition-property: -webkit-transform;    
    120. 

  120.     -webkit-transition-duration: 250ms;    
    121. 

  121. }    
    122. 

  122.     
    123. 

  123. #pullDown .pullDownIcon {    
    124. 

  124.     -webkit-transform: rotate(0deg) translateZ(0);    
    125. 

  125. }    
    126. 

  126.     
    127. 

  127. #pullUp .pullUpIcon {    
    128. 

  128.     -webkit-transform: rotate(-180deg) translateZ(0);    
    129. 

  129. }    
    130. 

  130.     
    131. 

  131. #pullDown.flip .pullDownIcon {    
    132. 

  132.     -webkit-transform: rotate(-180deg) translateZ(0);    
    133. 

  133. }    
    134. 

  134.     
    135. 

  135. #pullUp.flip .pullUpIcon {    
    136. 

  136.     -webkit-transform: rotate(0deg) translateZ(0);    
    137. 

  137. }    
    138. 

  138.     
    139. 

  139. #pullDown.loading .pullDownIcon,#pullUp.loading .pullUpIcon {    
    140. 

  140.     background-position: 0 100%;    
    141. 

  141.     -webkit-transform: rotate(0deg) translateZ(0);    
    142. 

  142.     -webkit-transition-duration: 0ms;    
    143. 

  143.     -webkit-animation-name: loading;    
    144. 

  144.     -webkit-animation-duration: 2s;    
    145. 

  145.     -webkit-animation-iteration-count: infinite;    
    146. 

  146.     -webkit-animation-timing-function: linear;    
    147. 

  147. }    
    148. 

  148.     
    149. 

  149. .-webkit-keyframes loading {    
    150. 

  150.     from {     
    151. 

  151.         -webkit-transform:rotate(0deg)translateZ(0);    
    152. 

  152.     }    
    153. 

  153.     
    154. 

  154.     .to {    
    155. 

  155.         -webkit-transform: rotate(360deg) translateZ(0);    
    156. 

  156.     }    
    157. 

  157. }    
    158. 










html代码块








[html] view plaincopy在CODE上查看代码片派生到我的代码片

 








      

    1. <body onload="loaded()">  
      2. 

    2.     <div id="header">iScroll</div>  
      3. 

    3.   
      4. 

    4.     <div id="content">  
      5. 

    5.         <div id="scroller">  
      6. 

    6.             <div id="pullDown" class="ub ub-pc c-gra">  
      7. 

    7.                 <div class="pullDownIcon"></div>  
      8. 

    8.                 <div class="pullDownLabel">下拉刷新</div>  
      9. 

    9.             </div>  
      10. 

    10.             <ul id="add">  
      11. 

    11.                 <li>Pretty row 1</li>  
      12. 

    12.                 <li>Pretty row 2</li>  
      13. 

    13.                 <li>Pretty row 3</li>  
      14. 

    14.                 <li>Pretty row 4</li>  
      15. 

    15.                 <li>Pretty row 5</li>  
      16. 

    16.                 <li>Pretty row 6</li>  
      17. 

    17.                 <li>Pretty row 7</li>  
      18. 

    18.                 <li>Pretty row 8</li>  
      19. 

    19.                 <li>Pretty row 9</li>  
      20. 

    20.                 <li>Pretty row 10</li>  
      21. 

    21.                 <li>Pretty row 11</li>  
      22. 

    22.                 <li>Pretty row 12</li>  
      23. 

    23.                 <li>Pretty row 13</li>  
      24. 

    24.                 <li>Pretty row 14</li>  
      25. 

    25.                 <li>Pretty row 15</li>  
      26. 

    26.                 <li>Pretty row 16</li>  
      27. 

    27.                 <li>Pretty row 17</li>  
      28. 

    28.                 <li>Pretty row 18</li>  
      29. 

    29.                 <li>Pretty row 19</li>  
      30. 

    30.                 <li>Pretty row 20</li>  
      31. 

    31.                 <li>Pretty row 21</li>  
      32. 

    32.                 <li>Pretty row 22</li>  
      33. 

    33.                 <li>Pretty row 23</li>  
      34. 

    34.                 <li>Pretty row 24</li>  
      35. 

    35.                 <li>Pretty row 25</li>  
      36. 

    36.                 <li>Pretty row 26</li>  
      37. 

    37.                 <li>Pretty row 27</li>  
      38. 

    38.                 <li>Pretty row 28</li>  
      39. 

    39.                 <li>Pretty row 29</li>  
      40. 

    40.                 <li>Pretty row 30</li>  
      41. 

    41.                 <li>Pretty row 31</li>  
      42. 

    42.                 <li>Pretty row 32</li>  
      43. 

    43.                 <li>Pretty row 33</li>  
      44. 

    44.                 <li>Pretty row 34</li>  
      45. 

    45.                 <li>Pretty row 35</li>  
      46. 

    46.                 <li>Pretty row 36</li>  
      47. 

    47.                 <li>Pretty row 37</li>  
      48. 

    48.                 <li>Pretty row 38</li>  
      49. 

    49.                 <li>Pretty row 39</li>  
      50. 

    50.                 <li>Pretty row 40</li>  
      51. 

    51.                 <li>Pretty row 41</li>  
      52. 

    52.                 <li>Pretty row 42</li>  
      53. 

    53.                 <li>Pretty row 43</li>  
      54. 

    54.                 <li>Pretty row 44</li>  
      55. 

    55.                 <li>Pretty row 45</li>  
      56. 

    56.                 <li>Pretty row 46</li>  
      57. 

    57.                 <li>Pretty row 47</li>  
      58. 

    58.                 <li>Pretty row 48</li>  
      59. 

    59.                 <li>Pretty row 49</li>  
      60. 

    60.                 <li>Pretty row 50</li>  
      61. 

    61.             </ul>  
      62. 

    62.             <div id="pullUp" class="ub ub-pc c-gra">  
      63. 

    63.                 <div class="pullUpIcon"></div>  
      64. 

    64.                 <div class="pullUpLabel">上拉显示更多...</div>  
      65. 

    65.             </div>  
      66. 

    66.         </div>  
      67. 

    67.     </div>  
      68. 

    68.   
      69. 

    69.     <div id="footer"></div>  
      70. 

    70.   
      71. 

    71. </body>  
      72. 





        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/mrxia/p/3868126.html