Iscrool下拉刷新

简易下拉刷新

css样式：

                         *{
                 margin: 0px;
                 padding: 0px;

             }
             #wrapper{
                 width: 100%;
                 height: 150px;
                 border: 1px solid red;
                 overflow: hidden;
                 position: absolute;
             }
             #shua{
                 text-align: center;
             }                    

HTML代码

             <div id="wrapper">
             <div>
                 <div id="shua">刷新</div>
                 <ul>
                     <li>1</li>
                     <li>2</li>
                     <li>3</li>
                     <li>4</li>
                     <li>5</li>
                     <li>6</li>
                     <li>7</li>
                     <li>8</li>
                     <li>9</li>
                     <li>10</li>
                 </ul>
             </div>
         </div>        

在写js代码之前，要引入jQuery插件和 iscroll插件

然后js代码如下： 　　　　　<script type="text/javascript">

　　　　　　　　　//给内容添加滚动事件
             var a=new IScroll("#wrapper",{
                 scrollbars:true,
                 mouseWheel:true,
                 interactiveScrollbars:true,
 //                scrollX:true,
 //                freeScroll:true,
                 probeType:2,
             })
　　　　　　　　　//让文字先隐藏
             $("#shua").hide();
             var x=0;
             a.on("scroll",function(){
                 if(x==0){
                     if(this.y>40){
                         $("#shua").show();
                         $("#shua").text("松开手进行刷新")
                         x=1;
                     }
                 a.on("scrollEnd",function(){
                     if(x==1){
                         $("#shua").text("正在刷新")
                         setTimeout(shuju,1000)
                         x=2;
                     }
                 })
                 var z=0;
                 function shuju(){
                     if(x==2){
                         $("#shua").hide();
                         $("ul>li:nth-child(1)").before($("<li></li>").text("数据"+ z++))
                         a.refresh()
                         x=0;
                     }

                 }
             }

         })
         </script>

这样就完成了一个简单的下拉刷新！！