首页 > 代码库 > iscroll5 上下拉动刷新

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.     -webkit-box-sizing: border-box;  
  3.     -moz-box-sizing: border-box;  
  4.     box-sizing: border-box;  
  5. }  
  6.   
  7. html {  
  8.     -ms-touch-action: none;  
  9. }  
  10.   
  11. body,ul,li {  
  12.     padding: 0;  
  13.     margin: 0;  
  14.     border: 0;  
  15. }  
  16.   
  17. body {  
  18.     font-size: 12px;  
  19.     font-family: ubuntu, helvetica, arial;  
  20.     overflow: hidden;  
  21.     /* this is important to prevent the whole page to bounce */  
  22. }  
  23.   
  24. #header {  
  25.     position: absolute;  
  26.     z-index: 2;  
  27.     top: 0;  
  28.     left: 0;  
  29.     width: 100%;  
  30.     height: 45px;  
  31.     line-height: 45px;  
  32.     background: #CD235C;  
  33.     padding: 0;  
  34.     color: #eee;  
  35.     font-size: 20px;  
  36.     text-align: center;  
  37.     font-weight: bold;  
  38. }  
  39.   
  40. #footer {  
  41.     position: absolute;  
  42.     z-index: 2;  
  43.     bottom: 0;  
  44.     left: 0;  
  45.     width: 100%;  
  46.     height: 48px;  
  47.     background: #444;  
  48.     padding: 0;  
  49.     border-top: 1px solid #444;  
  50. }  
  51.   
  52. #content {  
  53.     position: absolute;  
  54.     z-index: 1;  
  55.     top: 45px;  
  56.     bottom: 48px;  
  57.     left: 0;  
  58.     width: 100%;  
  59.     background: #ccc;  
  60.     overflow: hidden;  
  61. }  
  62.   
  63. #scroller {  
  64.     position: absolute;  
  65.     z-index: 1;  
  66.     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
  67.     width: 100%;  
  68.     -webkit-transform: translateZ(0);  
  69.     -moz-transform: translateZ(0);  
  70.     -ms-transform: translateZ(0);  
  71.     -o-transform: translateZ(0);  
  72.     transform: translateZ(0);  
  73.     -webkit-touch-callout: none;  
  74.     -webkit-user-select: none;  
  75.     -moz-user-select: none;  
  76.     -ms-user-select: none;  
  77.     user-select: none;  
  78.     -webkit-text-size-adjust: none;  
  79.     -moz-text-size-adjust: none;  
  80.     -ms-text-size-adjust: none;  
  81.     -o-text-size-adjust: none;  
  82.     text-size-adjust: none;  
  83. }  
  84.   
  85. #scroller ul {  
  86.     list-style: none;  
  87.     padding: 0;  
  88.     margin: 0;  
  89.     width: 100%;  
  90.     text-align: left;  
  91. }  
  92.   
  93. #scroller li {  
  94.     padding: 0 10px;  
  95.     height: 40px;  
  96.     line-height: 40px;  
  97.     border-bottom: 1px solid #ccc;  
  98.     border-top: 1px solid #fff;  
  99.     background-color: #fafafa;  
  100.     font-size: 14px;  
  101. }  
  102. #pullDown,#pullUp {    
  103.     height: 40px;    
  104.     line-height: 40px;    
  105.     padding: 5px 10px;    
  106.     font-weight: bold;    
  107.     font-size: 14px;    
  108.     color: #888;    
  109. }    
  110.     
  111. #pullDown .pullDownIcon,#pullUp .pullUpIcon {    
  112.     display: block;    
  113.     float: left;    
  114.     width: 40px;    
  115.     height: 40px;    
  116.     background: url(img/pull-icon@2x.png) 0 0 no-repeat;    
  117.     -webkit-background-size: 40px 80px;    
  118.     background-size: 40px 80px;    
  119.     -webkit-transition-property: -webkit-transform;    
  120.     -webkit-transition-duration: 250ms;    
  121. }    
  122.     
  123. #pullDown .pullDownIcon {    
  124.     -webkit-transform: rotate(0deg) translateZ(0);    
  125. }    
  126.     
  127. #pullUp .pullUpIcon {    
  128.     -webkit-transform: rotate(-180deg) translateZ(0);    
  129. }    
  130.     
  131. #pullDown.flip .pullDownIcon {    
  132.     -webkit-transform: rotate(-180deg) translateZ(0);    
  133. }    
  134.     
  135. #pullUp.flip .pullUpIcon {    
  136.     -webkit-transform: rotate(0deg) translateZ(0);    
  137. }    
  138.     
  139. #pullDown.loading .pullDownIcon,#pullUp.loading .pullUpIcon {    
  140.     background-position: 0 100%;    
  141.     -webkit-transform: rotate(0deg) translateZ(0);    
  142.     -webkit-transition-duration: 0ms;    
  143.     -webkit-animation-name: loading;    
  144.     -webkit-animation-duration: 2s;    
  145.     -webkit-animation-iteration-count: infinite;    
  146.     -webkit-animation-timing-function: linear;    
  147. }    
  148.     
  149. .-webkit-keyframes loading {    
  150.     from {     
  151.         -webkit-transform:rotate(0deg)translateZ(0);    
  152.     }    
  153.     
  154.     .to {    
  155.         -webkit-transform: rotate(360deg) translateZ(0);    
  156.     }    
  157. }    



 


html代码块

 

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
    1. <body onload="loaded()">  
    2.     <div id="header">iScroll</div>  
    3.   
    4.     <div id="content">  
    5.         <div id="scroller">  
    6.             <div id="pullDown" class="ub ub-pc c-gra">  
    7.                 <div class="pullDownIcon"></div>  
    8.                 <div class="pullDownLabel">下拉刷新</div>  
    9.             </div>  
    10.             <ul id="add">  
    11.                 <li>Pretty row 1</li>  
    12.                 <li>Pretty row 2</li>  
    13.                 <li>Pretty row 3</li>  
    14.                 <li>Pretty row 4</li>  
    15.                 <li>Pretty row 5</li>  
    16.                 <li>Pretty row 6</li>  
    17.                 <li>Pretty row 7</li>  
    18.                 <li>Pretty row 8</li>  
    19.                 <li>Pretty row 9</li>  
    20.                 <li>Pretty row 10</li>  
    21.                 <li>Pretty row 11</li>  
    22.                 <li>Pretty row 12</li>  
    23.                 <li>Pretty row 13</li>  
    24.                 <li>Pretty row 14</li>  
    25.                 <li>Pretty row 15</li>  
    26.                 <li>Pretty row 16</li>  
    27.                 <li>Pretty row 17</li>  
    28.                 <li>Pretty row 18</li>  
    29.                 <li>Pretty row 19</li>  
    30.                 <li>Pretty row 20</li>  
    31.                 <li>Pretty row 21</li>  
    32.                 <li>Pretty row 22</li>  
    33.                 <li>Pretty row 23</li>  
    34.                 <li>Pretty row 24</li>  
    35.                 <li>Pretty row 25</li>  
    36.                 <li>Pretty row 26</li>  
    37.                 <li>Pretty row 27</li>  
    38.                 <li>Pretty row 28</li>  
    39.                 <li>Pretty row 29</li>  
    40.                 <li>Pretty row 30</li>  
    41.                 <li>Pretty row 31</li>  
    42.                 <li>Pretty row 32</li>  
    43.                 <li>Pretty row 33</li>  
    44.                 <li>Pretty row 34</li>  
    45.                 <li>Pretty row 35</li>  
    46.                 <li>Pretty row 36</li>  
    47.                 <li>Pretty row 37</li>  
    48.                 <li>Pretty row 38</li>  
    49.                 <li>Pretty row 39</li>  
    50.                 <li>Pretty row 40</li>  
    51.                 <li>Pretty row 41</li>  
    52.                 <li>Pretty row 42</li>  
    53.                 <li>Pretty row 43</li>  
    54.                 <li>Pretty row 44</li>  
    55.                 <li>Pretty row 45</li>  
    56.                 <li>Pretty row 46</li>  
    57.                 <li>Pretty row 47</li>  
    58.                 <li>Pretty row 48</li>  
    59.                 <li>Pretty row 49</li>  
    60.                 <li>Pretty row 50</li>  
    61.             </ul>  
    62.             <div id="pullUp" class="ub ub-pc c-gra">  
    63.                 <div class="pullUpIcon"></div>  
    64.                 <div class="pullUpLabel">上拉显示更多...</div>  
    65.             </div>  
    66.         </div>  
    67.     </div>  
    68.   
    69.     <div id="footer"></div>  
    70.   
    71. </body>