學習 | iscroll之上拉加載下拉刷新

引入文件順序

一、zepto

二、iscroll.js

三、scroll-probe.js

連接 

完整代碼：https://github.com/dirkhe1051931999/writeBlog/tree/master/iscroll

iscroll： https://github.com/cubiq/iscroll/

參數手冊：https://blog.csdn.net/sweetsuzyhyf/article/details/44195549/

html

<div id="header">iScroll</div>
<div id="wrapper">
    <div id="scroller">
    <div id="pullDown" class=""><div class="pullDownLabel"></div></div>
        <div class="pulldown-tips">↓下拉刷新</div>
        <ul id="list">
            <li>Pretty row 1</li>
            <li>Pretty row 2</li>
            <li>Pretty row 3</li>
            <li>Pretty row 4</li>
            <li>Pretty row 1</li>
            <li>Pretty row 2</li>
            <li>Pretty row 3</li>
            <li>Pretty row 4</li>
            <li>Pretty row 1</li>
            <li>Pretty row 2</li>
            <li>Pretty row 3</li>
            <li>Pretty row 4</li>
            <li>Pretty row 1</li>
            <li>Pretty row 2</li>
            <li>Pretty row 3</li>
            <li>Pretty row 4</li>
        </ul>
        <div id="pullUp" class="">
        <div class="pullUpLabel">加載更多</div>
        </div>
    </div>
</div>
 
<div id="footer"></div>

初始化

　　　　 var myScroll,
        pullDown = $("#pullDown"),
        pullUp = $("#pullUp"),
        pullDownLabel = $(".pullDownLabel"),
        pullUpLabel = $(".pullUpLabel"),
        container = $('#list'),
        loadingStep = 0;//加載狀態0默認，1顯示加載狀態，2執行加載數據，只有當爲0時才能再次加載，這是防止過快拉動刷新

        pullDown.hide();
        pullUp.hide();
        myScroll = new IScroll("#wrapper", {
            scrollbars: true,
            mouseWheel: false,
            interactiveScrollbars: true,//用戶是否能夠拖動滾動條
            shrinkScrollbars: 'scale', //按比例的收縮滾動條
            fadeScrollbars: true,  //是否漸隱滾動條
            scrollY:true,
            probeType: 2, //probeType：2  滾動時每隔必定時間觸發
            bindToWrapper:true //光標、觸摸超出容器時，是否中止滾動
        });
        myScroll.on("scroll",function(){
            if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh')){
                if(this.y > 60){//下拉刷新操做
                    $(".pulldown-tips").hide();
                    pullDown.addClass("refresh").show();
                    pullDownLabel.text("鬆手刷新數據");
                    loadingStep = 1;
                    myScroll.refresh();
                // 上拉加載
                }else if(this.y < (this.maxScrollY - 20)){//上拉加載更多
                    pullUp.addClass("refresh").show();
                    pullUpLabel.text("↑上拉加載");
                    loadingStep = 1;
                    pullUpAction();
                }
            }
        });
        // 下拉刷新
        myScroll.on("scrollEnd",function(){
            if(loadingStep == 1){
                if( pullDown.attr("class").match("refresh") ){//下拉刷新操做
                    pullDown.removeClass("refresh").addClass("loading");
                    pullDownLabel.text("正在刷新");
                    loadingStep = 2;
                    pullDownAction();
                }
            }
        });

函數

　　　　　　function pullDownAction(){
            var li;
            setTimeout(function(){
                $.ajax({
                  type: 'GET',
                  url: './test.php',
                  dataType: 'json',
                  timeout: 300,
                  success: function(data){
                    li = "<li>"+ data +"</li>";
                    container.prepend(li);
                  },
                  error: function(xhr, type){
                    alert('Ajax error!')
                  }
                })
                pullDown.attr('class','').hide();
                myScroll.refresh();
                loadingStep = 0;
                $(".pulldown-tips").show();
            },500);
        }
        function pullUpAction(){
            setTimeout(function(){
                $.ajax({
                  type: 'GET',
                  url: './test.php',
                  dataType: 'json',
                  timeout: 300,
                  success: function(data){
                    li = "<li>"+ data +"</li>";
                    container.append(li);
                  },
                  error: function(xhr, type){
                    alert('Ajax error!')
                  }
                })
                pullUp.attr('class','').hide();
                myScroll.refresh();
                loadingStep = 0;
            },500);
        }
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);