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>
浙公网安备 33010602011771号