快捷導(dǎo)航

Iscrool下拉刷新功能實現(xiàn)方法(推薦)

更新時間：2017年06月26日 07:52:41 投稿：jingxian

下面小編就為大家?guī)硪黄狪scrool下拉刷新功能實現(xiàn)方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

簡易下拉刷新實現(xiàn)方法

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

//給內(nèi)容添加滾動事件
      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("數(shù)據(jù)"+ z++))
            a.refresh()
            x=0;
          }
              
        }
      }
        
    })
    </script>

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

以上這篇Iscrool下拉刷新功能實現(xiàn)方法(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: