碼上歡樂
相關內容    簡體    繁體

iscroll5 上下拉動刷新

本文轉載自   查看原文   2014-07-25 15:17   12602    iScroll5/ js

在這我不想說其他寫的如何如何，雖然本人不是很會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 plain copy 在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 plain 
           copy 
           在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.     width: 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.     width: 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.     width: 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.     width: 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.     width: 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.     width: 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 plain 
           copy 
           在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.  
          
     
         
 
        
 
         
         
       
 
        
       
 
        
 
 
       
 
        
       
 
       
 
      
 
      
 
      
 
     
 
     
 
      
 
      
 
        
       
免責聲明！
 
       
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
 
      
 
      

      
 
     
 
    
 
     
    
 
     
 
      猜您在找 
        react + iscroll5 實現完美 下拉刷新，上拉加載  
        iScroll-5拉動刷新功能實現與iScroll-4上拉刷新的一點改進  
        iscroll 下拉刷新功能  
        利用iscroll實現上拉加載下拉刷新  
        IScroll那些事——內容不足時下拉刷新  
        監聽用戶下拉動作 刷新onPullDownRefresh  
        H5基於iScroll實現下拉刷新，上拉加載更多....  
        H5基於iScroll實現下拉刷新，上拉加載更多  
        iscroll 移動端上拉刷新 下拉加載 實例 ！  
        iscroll實現移動端下拉刷新，上拉加載更多  
      
 
      
 
     
 
    
 
   
 
  
 
  

    
  
 
  
 
   
 
   
 
   
 
    粵ICP備18138465號  
    © 2018-2025 CODEPRJ.COM