Iscrool下拉刷新

 简易下拉刷新

css样式：

                        *{
                margin: 0px;
                padding: 0px;
                
            }
            #wrapper{
                 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>

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