码迷,mamicode.com
首页 > 其他好文 > 详细

使用iscroll插件实现下拉刷新功能

时间:2015-10-26 20:17:53      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6     <meta name="apple-mobile-web-app-capable" content="yes">
  7     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8     <title>html5+css3实现上拉和下拉刷新</title>
  9 
 10     <script type="text/javascript" src="http://statics.webkfa.com/js/iscroll.js"></script>
 11 
 12     <script type="text/javascript">
 13 
 14             var myScroll,
 15                 pullDownEl,
 16                 pullDownOffset,
 17                 pullUpEl,
 18                 pullUpOffset,
 19                 generatedCount = 0;
 20 
 21         function pullDownAction () {
 22             setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
 23                 var el, li, i;
 24                 el = document.getElementById(‘thelist‘);
 25 
 26                 for (i=0; i<3; i++) {
 27                     li = document.createElement(‘li‘);
 28                     li.innerText = ‘Generated row ‘ + (++generatedCount);
 29                     el.insertBefore(li, el.childNodes[0]);
 30                 }
 31 
 32                 myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
 33             }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
 34         }
 35 
 36         function pullUpAction () {
 37             setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
 38                 var el, li, i;
 39                 el = document.getElementById(‘thelist‘);
 40 
 41                 for (i=0; i<3; i++) {
 42                     li = document.createElement(‘li‘);
 43                     li.innerText = ‘Generated row ‘ + (++generatedCount);
 44                     el.appendChild(li, el.childNodes[0]);
 45                 }
 46 
 47                 myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
 48             }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
 49         }
 50 
 51         function loaded() {
 52             pullDownEl = document.getElementById(‘pullDown‘);
 53             pullDownOffset = pullDownEl.offsetHeight;
 54             pullUpEl = document.getElementById(‘pullUp‘);
 55             pullUpOffset = pullUpEl.offsetHeight;
 56 
 57             myScroll = new iScroll(‘wrapper‘, {
 58                 useTransition: true,
 59                 topOffset: pullDownOffset,
 60                 onRefresh: function () {
 61                     if (pullDownEl.className.match(‘loading‘)) {
 62                         pullDownEl.className = ‘‘;
 63                         pullDownEl.querySelector(‘.pullDownLabel‘).innerHTML = ‘Pull down to refresh...‘;
 64                     } else if (pullUpEl.className.match(‘loading‘)) {
 65                         pullUpEl.className = ‘‘;
 66                         pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘Pull up to load more...‘;
 67                     }
 68                 },
 69                 onScrollMove: function () {
 70                     if (this.y > 5 && !pullDownEl.className.match(‘flip‘)) {
 71                         pullDownEl.className = ‘flip‘;
 72                         pullDownEl.querySelector(‘.pullDownLabel‘).innerHTML = ‘Release to refresh...‘;
 73                         this.minScrollY = 0;
 74                     } else if (this.y < 5 && pullDownEl.className.match(‘flip‘)) {
 75                         pullDownEl.className = ‘‘;
 76                         pullDownEl.querySelector(‘.pullDownLabel‘).innerHTML = ‘Pull down to refresh...‘;
 77                         this.minScrollY = -pullDownOffset;
 78                     } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match(‘flip‘)) {
 79                         pullUpEl.className = ‘flip‘;
 80                         pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘Release to refresh...‘;
 81                         this.maxScrollY = this.maxScrollY;
 82                     } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match(‘flip‘)) {
 83                         pullUpEl.className = ‘‘;
 84                         pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘Pull up to load more...‘;
 85                         this.maxScrollY = pullUpOffset;
 86                     }
 87                 },
 88                 onScrollEnd: function () {
 89                     if (pullDownEl.className.match(‘flip‘)) {
 90                         pullDownEl.className = ‘loading‘;
 91                         pullDownEl.querySelector(‘.pullDownLabel‘).innerHTML = ‘Loading...‘;
 92                         pullDownAction();    // Execute custom function (ajax call?)
 93                     } else if (pullUpEl.className.match(‘flip‘)) {
 94                         pullUpEl.className = ‘loading‘;
 95                         pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘Loading...‘;
 96                         pullUpAction();    // Execute custom function (ajax call?)
 97                     }
 98                 }
 99             });
100 
101             setTimeout(function () { document.getElementById(‘wrapper‘).style.left = ‘0‘; }, 800);
102         }
103 
104         document.addEventListener(‘touchmove‘, function (e) { e.preventDefault(); }, false);
105 
106         document.addEventListener(‘DOMContentLoaded‘, function () { setTimeout(loaded, 200); }, false);
107     </script>
108 
109     <style type="text/css" media="all">
110         body,ul,li {
111             padding:0;
112             margin:0;
113             border:0;
114         }
115 
116         body {
117             font-size:12px;
118             -webkit-user-select:none;
119             -webkit-text-size-adjust:none;
120             font-family:helvetica;
121         }
122 
123         #header {
124             position:absolute; z-index:2;
125             top:0; left:0;
126             width:100%;
127             height:45px;
128             line-height:45px;
129             background-color:#d51875;
130             background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
131             background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
132             background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
133             padding:0;
134             color:#eee;
135             font-size:20px;
136             text-align:center;
137         }
138 
139         #header a {
140             color:#f3f3f3;
141             text-decoration:none;
142             font-weight:bold;
143             text-shadow:0 -1px 0 rgba(0,0,0,0.5);
144         }
145 
146         #footer {
147             position:absolute; z-index:2;
148             bottom:0; left:0;
149             width:100%;
150             height:48px;
151             background-color:#222;
152             background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
153             background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
154             background-image:-o-linear-gradient(top, #999, #666 2%, #222);
155             padding:0;
156             border-top:1px solid #444;
157         }
158 
159         #wrapper {
160             position:absolute; z-index:1;
161             top:45px; bottom:48px; left:-9999px;
162             width:100%;
163             background:#aaa;
164             overflow:auto;
165         }
166 
167         #scroller {
168             position:absolute; z-index:1;
169             /*    -webkit-touch-callout:none;*/
170             -webkit-tap-highlight-color:rgba(0,0,0,0);
171             width:100%;
172             padding:0;
173         }
174 
175         #scroller ul {
176             list-style:none;
177             padding:0;
178             margin:0;
179             width:100%;
180             text-align:left;
181         }
182 
183         #scroller li {
184             padding:0 10px;
185             height:40px;
186             line-height:40px;
187             border-bottom:1px solid #ccc;
188             border-top:1px solid #fff;
189             background-color:#fafafa;
190             font-size:14px;
191         }
192 
193         #myFrame {
194             position:absolute;
195             top:0; left:0;
196         }
197 
198 
199 
200         /**
201          *
202          * Pull down styles
203          *
204          */
205         #pullDown, #pullUp {
206             background:#fff;
207             height:40px;
208             line-height:40px;
209             padding:5px 10px;
210             border-bottom:1px solid #ccc;
211             font-weight:bold;
212             font-size:14px;
213             color:#888;
214         }
215         #pullDown .pullDownIcon, #pullUp .pullUpIcon  {
216             display:block; float:left;
217             width:40px; height:40px;
218             background:url(http://statics.webkfa.com/img/pull-icon@2x.png) 0 0 no-repeat;
219             -webkit-background-size:40px 80px; background-size:40px 80px;
220             -webkit-transition-property:-webkit-transform;
221             -webkit-transition-duration:250ms;
222         }
223         #pullDown .pullDownIcon {
224             -webkit-transform:rotate(0deg) translateZ(0);
225         }
226         #pullUp .pullUpIcon  {
227             -webkit-transform:rotate(-180deg) translateZ(0);
228         }
229 
230         #pullDown.flip .pullDownIcon {
231             -webkit-transform:rotate(-180deg) translateZ(0);
232         }
233 
234         #pullUp.flip .pullUpIcon {
235             -webkit-transform:rotate(0deg) translateZ(0);
236         }
237 
238         #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
239             background-position:0 100%;
240             -webkit-transform:rotate(0deg) translateZ(0);
241             -webkit-transition-duration:0ms;
242 
243             -webkit-animation-name:loading;
244             -webkit-animation-duration:2s;
245             -webkit-animation-iteration-count:infinite;
246             -webkit-animation-timing-function:linear;
247         }
248 
249         @-webkit-keyframes loading {
250             from { -webkit-transform:rotate(0deg) translateZ(0); }
251             to { -webkit-transform:rotate(360deg) translateZ(0); }
252         }
253 
254     </style>
255 </head>
256 <body>
257 
258 <div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div>
259 <div id="wrapper">
260     <div id="scroller">
261         <div id="pullDown">
262             <span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
263         </div>
264 
265         <ul id="thelist">
266             <li>Pretty row 1</li>
267             <li>Pretty row 2</li>
268             <li>Pretty row 3</li>
269             <li>Pretty row 4</li>
270             <li>Pretty row 5</li>
271             <li>Pretty row 6</li>
272             <li>Pretty row 7</li>
273             <li>Pretty row 8</li>
274             <li>Pretty row 9</li>
275             <li>Pretty row 10</li>
276             <li>Pretty row 11</li>
277             <li>Pretty row 12</li>
278             <li>Pretty row 13</li>
279             <li>Pretty row 14</li>
280             <li>Pretty row 15</li>
281             <li>Pretty row 16</li>
282             <li>Pretty row 17</li>
283             <li>Pretty row 18</li>
284             <li>Pretty row 19</li>
285             <li>Pretty row 20</li>
286             <li>Pretty row 21</li>
287             <li>Pretty row 22</li>
288             <li>Pretty row 23</li>
289             <li>Pretty row 24</li>
290             <li>Pretty row 25</li>
291             <li>Pretty row 26</li>
292             <li>Pretty row 27</li>
293             <li>Pretty row 28</li>
294             <li>Pretty row 29</li>
295             <li>Pretty row 30</li>
296             <li>Pretty row 31</li>
297             <li>Pretty row 32</li>
298             <li>Pretty row 33</li>
299             <li>Pretty row 34</li>
300             <li>Pretty row 35</li>
301             <li>Pretty row 36</li>
302             <li>Pretty row 37</li>
303             <li>Pretty row 38</li>
304             <li>Pretty row 39</li>
305             <li>Pretty row 40</li>
306         </ul>
307         <div id="pullUp">
308             <span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span>
309         </div>
310     </div>
311 </div>
312 <div id="footer"></div>
313 
314 </body>
315 </html>

将定时函数换成ajax回调,具体怎么换,到项目需求时在测试吧

使用iscroll插件实现下拉刷新功能

标签:

原文地址:http://www.cnblogs.com/suoking/p/4911995.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!