学习 | iscroll学习之上拉加载下拉刷新

Posted 2020-12-03 dirkhe

引入文件顺序

1、zepto

2、iscroll.js

3、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);