isscroll插件 实现下拉加载 上啦刷新 转

时间：2024-10-23 17:05:38

http://www.jb51.net/article/98394.htm

下面是别人的代码

<!DOCTYPE html>

<html>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

 <meta name="apple-mobile-web-app-capable" content="yes">

 <meta name="apple-mobile-web-app-status-bar-style" content="black">

 <title>iScroll 实例：下拉刷新，滚动翻页</title>

<style type="text/css">

* {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}  

html {

    -ms-touch-action: none;

}  

body,ul,li {

    padding: 0;

    margin: 0;

    border: 0;

}  

body {

    font-size: 12px;

    font-family: ubuntu, helvetica, arial;

    overflow: hidden; /* this is important to prevent the whole page to bounce */

}  

#header {

    position: absolute;

    z-index: 2;

    top: 0;

    left: 0;

    width: 100%;

    height: 45px;

    line-height: 45px;

    background: #CD235C;

    padding: 0;

    color: #eee;

    font-size: 20px;

    text-align: center;

    font-weight: bold;

}  

#footer {

    position: absolute;

    z-index: 2;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 48px;

    background: #444;

    padding: 0;

    border-top: 1px solid #444;

}  

#wrapper {

    position: absolute;

    z-index: 1;

    top: 45px;

    bottom: 48px;

    left: 0;

    width: 100%;

    background: #ccc;

    overflow: hidden;

}  

#scroller {

    position: absolute;

    z-index: 1;

    -webkit-tap-highlight-color: rgba(0,0,0,0);

    width: 100%;

    -webkit-transform: translateZ(0);

    -moz-transform: translateZ(0);

    -ms-transform: translateZ(0);

    -o-transform: translateZ(0);

    transform: translateZ(0);

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    -webkit-text-size-adjust: none;

    -moz-text-size-adjust: none;

    -ms-text-size-adjust: none;

    -o-text-size-adjust: none;

    text-size-adjust: none;

}  

#scroller ul {

    list-style: none;

    padding: 0;

    margin: 0;

    width: 100%;

    text-align: left;

}  

#scroller li {

    padding: 0 10px;

    height: 40px;

    line-height: 40px;

    border-bottom: 1px solid #ccc;

    border-top: 1px solid #fff;

    background-color: #fafafa;

    font-size: 14px;

}

#pullDown,#pullUp,.pulldown-tips{

    height:40px;

    line-height:40px;

    text-align:center;

}

    .pulldown-tips{

        position:absolute;

        top:-40px;

        left:0;

        width:100%;

    }  

</style>

</head>

<body onload="load()">

    <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 5</li>

                <li>Pretty row 6</li>

                <li>Pretty row 7</li>

                <li>Pretty row 8</li>

                <li>Pretty row 9</li>

                <li>Pretty row 10</li>

                <li>Pretty row 11</li>

                <li>Pretty row 12</li>

                <li>Pretty row 13</li>

                <li>Pretty row 14</li>

                <li>Pretty row 15</li>

                <li>Pretty row 16</li>

                <li>Pretty row 17</li>

                <li>Pretty row 18</li>

                <li>Pretty row 19</li>

                <li>Pretty row 20</li>

            </ul>

            <div id="pullUp" class="">

            <div class="pullUpLabel">加载更多</div>

            </div>

        </div>

    </div>  

    <div id="footer"></div>

    <script type="text/javascript" src="build/jquery-3.2.1.min.js"></script>

    <script type="text/javascript" src="build/iscroll-probe.js"></script>

    <script type="text/javascript">  

        function load () {

            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,

                    bindToWrapper:true

                });

                myScroll.on("scroll",function(){

                    if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh')){

                        if(this.y > 40){//下拉刷新操作

                            $(".pulldown-tips").hide();

                            pullDown.addClass("refresh").show();

                            pullDownLabel.text("松手刷新数据");

                            loadingStep = 1;

                            myScroll.refresh();

                        }else if(this.y < (this.maxScrollY - 14)){//上拉加载更多

                            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(){

                setTimeout(function(){

                    var li, i;

                    for (i = 0,li = ""; i < 3; i++) {

                        li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";

                    }

                    container.prepend(li);

                    pullDown.attr('class','').hide();

                    myScroll.refresh();

                    loadingStep = 0;

                    $(".pulldown-tips").show();

                },1000);

            }

            function pullUpAction(){

                setTimeout(function(){

                    var li, i;

                    for (i = 0,li = ""; i < 3; i++) {

                        li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";

                    }

                    container.append(li);

                    pullUp.attr('class','').hide();

                    myScroll.refresh();

                    loadingStep = 0;

                },1000);

            }  

            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

            }  

    </script>

</body>

</html>

相关文章