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>