iscroll的應用

1 引入js

1 <script src="<%=path%>/js/jquery-1.9.1.min.js"></script>
2 <script type="text/javascript" src="<%=path%>/js/scroll/iscroll.js" ></script>

2 樣式表(可參見官方demo)

 1     <style type="text/css" media="all">
 2     body {
 3         font-size:12px;
 4         -webkit-user-select:none;
 5         -webkit-text-size-adjust:none;
 6         font-family:helvetica;
 7     }
 8     
 9     #wrapper {
10         position:absolute; z-index:1;
11         top:0px; /*頂頭空白*/
12         bottom:48px; left:-9999px;
13         width:100%;
14         background:#e6ecec;
15         overflow:auto;
16     }
17     
18     #scroller {
19         position:absolute; z-index:1;
20     /*    -webkit-touch-callout:none;*/
21         -webkit-tap-highlight-color:rgba(0,0,0,0);
22         width:100%;
23         padding:0;
24     }
25     
26     #scroller li {
27     margin-bottom:5px;
28     }
29     
30     #pullDown{
31         height:40px;
32         padding:5px 10px;
33         font-size:14px;
34     }    
35     
36     #pullUp {
37         background:#fff;
38         height:40px;
39         line-height:40px;
40         padding:5px 10px;
41         border-bottom:1px solid #ccc;
42         font-weight:bold;
43         font-size:14px;
44         color:#888;
45     }
46     
47     #pullUp .pullUpIcon  {
48         display:block; float:left;
49         width:40px; height:40px;
50         /*background:url(pull-icon@2x.png) 0 0 no-repeat;*/
51         -webkit-background-size:40px 80px; background-size:40px 80px;
52         -webkit-transition-property:-webkit-transform;
53         -webkit-transition-duration:250ms;    
54     }
55     
56     #pullUp .pullUpIcon  {
57         -webkit-transform:rotate(-180deg) translateZ(0);
58     }
59     
60     #pullUp.flip .pullUpIcon {
61         -webkit-transform:rotate(0deg) translateZ(0);
62     }
63     
64     #pullUp.loading .pullUpIcon {
65         background-position:0 100%;
66         -webkit-transform:rotate(0deg) translateZ(0);
67         -webkit-transition-duration:0ms;
68     
69         -webkit-animation-name:loading;
70         -webkit-animation-duration:2s;
71         -webkit-animation-iteration-count:infinite;
72         -webkit-animation-timing-function:linear;
73     }
74         
75     @-webkit-keyframes loading {
76         from { -webkit-transform:rotate(0deg) translateZ(0); }
77         to { -webkit-transform:rotate(360deg) translateZ(0); }
78     }
79     </style>

 

3 js 

 

 1 function pullUpAction () {
 2             /*
 3             setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
 4                 
 5                 //var el, li, i;
 6                 //el = document.getElementById('thelist');
 7         
 8                 //for (i=0; i<10; i++) {
 9                 //    li = document.createElement('li');
10                 //    li.innerText = 'Generated row ' + (++generatedCount);
11                 //    el.appendChild(li, el.childNodes[0]);
12                 //}
13                 
14                 createInnerHTML();
15                 myscroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
16             }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
17             */
18             createInnerHTML();
19             myscroll.refresh();
20         }
21         
22         
23         function loaded(){
24             pullDownEl = document.getElementById('pullDown');
25             pullDownOffset = pullDownEl.offsetHeight;
26             pullUpEl = document.getElementById('pullUp');    
27             pullUpOffset = pullUpEl.offsetHeight;
28             
29             myscroll=new iScroll("wrapper",{
30                 useTransition: true,
31                 topOffset: pullDownOffset,
32                 onRefresh: function () {
33                     if (pullUpEl.className.match('loading')) {
34                         pullUpEl.className = '';
35                         pullUpEl.querySelector('.pullUpLabel').innerHTML = '向上拉動獲取更多內容...';
36                         
37                         if(isBottom){
38                             pullUpEl.querySelector('.pullUpLabel').innerHTML = '已經到最底端...';
39                         }else{
40                             pullUpEl.querySelector('.pullUpLabel').innerHTML = '向上拉動獲取更多內容...';
41                         }
42                         
43                     }
44                 },
45                 onScrollMove: function () {
46                     if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
47                         pullUpEl.className = 'flip';
48                         //pullUpEl.querySelector('.pullUpLabel').innerHTML = '鬆開刷新...';
49                         if(isBottom){
50                             pullUpEl.querySelector('.pullUpLabel').innerHTML = '已經到最底端...';
51                         }else{
52                             pullUpEl.querySelector('.pullUpLabel').innerHTML = '鬆開刷新...';
53                         }
54                         this.maxScrollY = this.maxScrollY;
55                     } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
56                         pullUpEl.className = '';
57                         pullUpEl.querySelector('.pullUpLabel').innerHTML = '向上拉動獲取更多內容...';
58                         this.maxScrollY = pullUpOffset;
59                     }
60                 },
61                 onScrollEnd: function () {
62                     if (pullUpEl.className.match('flip')) {
63                         pullUpEl.className = 'loading';
64                         pullUpEl.querySelector('.pullUpLabel').innerHTML = '數據加載中...';                
65                         pullUpAction();    // Execute custom function (ajax call?)
66                     }
67                 }
68             });
69             
70             setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
71         }
72         document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
73         document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

 

 

 

4 html

 1 <body>
 2        <div id="wrapper" data-role="page" data-theme="f" data-fullscreen="true"> 
 3     　 <div id="scroller" data-role="content">
 4         <div id="pullDown" display="none">
 5             <span class="pullDownIcon"></span><span class="pullDownLabel"></span>
 6         </div>
 7         
 8         <ul id="thelist" class="myapp">
 9             <script>
10                 createInnerHTML();
11             </script>
12         </ul>
13         
14         <div id="pullUp">
15                 <span class="pullUpIcon"></span><span class="pullUpLabel">向上拉動獲取更多內容...</span>
16         </div>
17       </div> 
18     </div>
19     
20     <div id="footer"></div>    
21   </body>