Iscrool下拉刷新

 簡易下拉刷新

css樣式：

 1                         *{
 2                 margin: 0px;
 3                 padding: 0px;
 4                 
 5             }
 6             #wrapper{
 7                 width: 100%;
 8                 height: 150px;
 9                 border: 1px solid red;
10                 overflow: hidden;
11                 position: absolute;
12             }
13             #shua{
14                 text-align: center;
15             }                    

HTML代碼

 1             <div id="wrapper">
 2             <div>
 3                 <div id="shua">刷新</div>
 4                 <ul>
 5                     <li>1</li>
 6                     <li>2</li>
 7                     <li>3</li>
 8                     <li>4</li>
 9                     <li>5</li>
10                     <li>6</li>
11                     <li>7</li>
12                     <li>8</li>
13                     <li>9</li>
14                     <li>10</li>
15                 </ul>
16             </div>
17         </div>        

在寫js代碼之前，要引入jQuery插件和 iscroll插件

然後js代碼如下： 　　　　　<script type="text/javascript">

　　　　　　　　　//給內容添加滾動事件
 2             var a=new IScroll("#wrapper",{
 3                 scrollbars:true,
 4                 mouseWheel:true,
 5                 interactiveScrollbars:true,
 6 //                scrollX:true,
 7 //                freeScroll:true,
 8                 probeType:2,
 9             })
　　　　　　　　　//讓文字先隱藏
10             $("#shua").hide();

11             var x=0;
12             a.on("scroll",function(){
13                 if(x==0){
14                     if(this.y>40){
15                         $("#shua").show();
16                         $("#shua").text("鬆開手進行刷新")
17                         x=1;
18                     }
19                 a.on("scrollEnd",function(){
20                     if(x==1){
21                         $("#shua").text("正在刷新")
22                         setTimeout(shuju,1000)
23                         x=2;
24                     }
25                 })
26                 var z=0;
27                 function shuju(){
28                     if(x==2){
29                         $("#shua").hide();
30                         $("ul>li:nth-child(1)").before($("<li></li>").text("數據"+ z++))
31                         a.refresh()
32                         x=0;
33                     }
34                             
35                 }
36             }
37                 
38         })
39         </script>

這樣就完成了一個簡單的下拉刷新！！