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代码如下：

//给内容添加滚动事件      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>

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

以上这篇Iscrool下拉刷新功能实现方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。