appcan与iscroll.js结合下拉刷新（转）

来源：互联网发布：淘宝店铺转让协议编辑：程序博客网时间：2024/05/16 06:20
  1 <!DOCTYPE html>  2 <html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">  3     <head>  4         <title></title>  5         <meta charset="utf-8">  6         <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">  7         <link rel="stylesheet" href="css/ui-base.css">  8         <link rel="stylesheet" href="css/ui-box.css">  9         <link rel="stylesheet" href="css/ui-color.css"> 10  11         <script src="js/zy_control.js"> 12         </script> 13         <script src="js/zy_click.js"> 14         </script> 15         <script src="js/zy_json.js"></script> 16         <script src="js/zy_tmpl.js"></script> 17         <script src="js/iscroll.js"> 18         </script> 19         <style type="text/css" media="all"> 20 body,ul,li { 21         padding:0; 22         margin:0; 23         border:0; 24 } 25  26 body { 27         font-size:12px; 28         -webkit-user-select:none; 29     -webkit-text-size-adjust:none; 30         font-family:helvetica; 31 } 32  33  34  35 #wrapper { 36         position:absolute; z-index:1; 37         top:45px; bottom:48px; left:-9999px; 38         width:100%; 39         background:#aaa; 40         overflow:auto; 41 } 42  43 #scroller { 44         position:absolute; z-index:1; 45 /*        -webkit-touch-callout:none;*/ 46         -webkit-tap-highlight-color:rgba(0,0,0,0); 47         width:100%; 48         padding:0; 49 } 50  51 #scroller ul { 52         list-style:none; 53         padding:0; 54         margin:0; 55         width:100%; 56         text-align:left; 57 } 58  59 #scroller li { 60         padding:0 10px; 61         height:40px; 62         line-height:40px; 63         border-bottom:1px solid #ccc; 64         border-top:1px solid #fff; 65         background-color:#fafafa; 66         font-size:14px; 67 } 68  69 #myFrame { 70         position:absolute; 71         top:0; left:0; 72 } 73  74  75  76 /** 77  * 78  * Pull down styles 79  * 80  */ 81 #pullDown, #pullUp { 82         background:#fff; 83         height:40px; 84         line-height:40px; 85         padding:5px 10px; 86         border-bottom:1px solid #ccc; 87         font-weight:bold; 88         font-size:14px; 89         color:#888; 90 } 91 #pullDown .pullDownIcon, #pullUp .pullUpIcon  { 92         display:block; float:left; 93         width:40px; height:40px; 94         background:url(pull-icon@2x.png) 0 0 no-repeat; 95         -webkit-background-size:40px 80px; background-size:40px 80px; 96         -webkit-transition-property:-webkit-transform; 97         -webkit-transition-duration:250ms;         98 } 99 #pullDown .pullDownIcon {100         -webkit-transform:rotate(0deg) translateZ(0);101 }102 #pullUp .pullUpIcon  {103         -webkit-transform:rotate(-180deg) translateZ(0);104 }105 106 #pullDown.flip .pullDownIcon {107         -webkit-transform:rotate(-180deg) translateZ(0);108 }109 110 #pullUp.flip .pullUpIcon {111         -webkit-transform:rotate(0deg) translateZ(0);112 }113 114 #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {115         background-position:0 100%;116         -webkit-transform:rotate(0deg) translateZ(0);117         -webkit-transition-duration:0ms;118 119         -webkit-animation-name:loading;120         -webkit-animation-duration:2s;121         -webkit-animation-iteration-count:infinite;122         -webkit-animation-timing-function:linear;123 }124 125 @-webkit-keyframes loading {126         from { -webkit-transform:rotate(0deg) translateZ(0); }127         to { -webkit-transform:rotate(360deg) translateZ(0); }128 }129 130 </style>131     </head>132     <body class="um-vp" ontouchstart>133     <div id="wrapper">134         <div id="scroller">135             <div id="pullDown">136                 <span class="pullDownIcon"></span>137                 <span class="pullDownLabel">Pull down to refresh...</span>138             </div>139             <div id="thelist">140             </div>141             <div id="pullUp">142                 <span class="pullUpIcon"></span>143                 <span class="pullUpLabel">Pull up to refresh...</span>144             </div>145         </div>146     </div>147     </body>148     <script>149             var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0;150                 var cid = 0;151         zy_init();152         window.uexOnload = function(type){153             if (!type) {154                 uexWindow.setBounce("1");155                 uexWindow.showBounceView("0", "#FFF", "0");156                 uexWindow.showBounceView("1", "#FFF", "0");157                 //我这里是初始加截内容158                 //.....159                 //.....160                 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);161                 loaded();162                                 163             }164         }165                 166         function pullDownAction(){167             setTimeout(function(){168                //拉到刷新的内容169                 myScroll.refresh(); 170             }, 1000);171         }172         173         function pullUpAction(){174             setTimeout(function(){175                 //拉到刷新的内容176                 myScroll.refresh();177             }, 1000);178         }179         180         function loaded(){181             pullDownEl = document.getElementById('pullDown');182             pullDownOffset = pullDownEl.offsetHeight;183             pullUpEl = document.getElementById('pullUp');184             pullUpOffset = pullUpEl.offsetHeight;185             myScroll = new iScroll('wrapper', {186                 useTransition: true,187                 topOffset: pullDownOffset,188                 onRefresh: function(){189                     if (pullDownEl.className.match('loading')) {190                         pullDownEl.className = '';191                         pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';192                     }193                     else 194                         if (pullUpEl.className.match('loading')) {195                             pullUpEl.className = '';196                             pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';197                         }198                 },199                 onScrollMove: function(){200                     if (this.y > 5 && !pullDownEl.className.match('flip')) {201                         pullDownEl.className = 'flip';202                         pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';203                         this.minScrollY = 0;204                     }205                     else 206                         if (this.y < 5 && pullDownEl.className.match('flip')) {207                             pullDownEl.className = '';208                             pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';209                             this.minScrollY = -pullDownOffset;210                         }211                         else 212                             if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {213                                 pullUpEl.className = 'flip';214                                 pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';215                                 this.maxScrollY = this.maxScrollY;216                             }217                             else 218                                 if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {219                                     pullUpEl.className = '';220                                     pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';221                                     this.maxScrollY = pullUpOffset;222                                 }223                 },224                 onScrollEnd: function(){225                     if (pullDownEl.className.match('flip')) {226                         pullDownEl.className = 'loading';227                         pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';228                         pullDownAction(); // Execute custom function (ajax call?)229                     }230                     else 231                         if (pullUpEl.className.match('flip')) {232                             pullUpEl.className = 'loading';233                             pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';234                             pullUpAction(); // Execute custom function (ajax call?)235                         }236                 }237             });238             239             setTimeout(function(){240                 document.getElementById('wrapper').style.left = '0';241             }, 800);242         }243         244         245     </script>246 </html>
0 0