iScroll下拉刷新上拉加载(简洁易懂版本)

发布: 2016-07-14 20:10:35标签: 前端开发
<!DOCTYPE html>
<html>

    <head>
        <meta charset='UTF-8'>
        <title></title>
        <style type='text/css'>
            * {
                margin: 0;
                padding: 0;
            }

            #container {
                height: 500px;
                overflow: hidden;
                position: relative;
                width: 600px;
                border: 1x solid #ccc;
                margin: 10px auto;
            }

            li {
                height: 100px;
                background: #fafafa;
                border-bottom: 1px solid #ccc;
            }
        </style>
    </head>

    <body>
        <div id='container'>
            <ul>
                <li id='pullDown' style='display:none'>下拉刷新</li>
                <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>
                <li id='pullUp' style='display:none'>上拉加载</li>
            </ul>
        </div>
    </body>
    <script src='js/iscroll-probe-min.js' type='text/javascript' charset='utf-8'></script>
    <script type='text/javascript'>
        var _down = document.getElementById('pullDown');
        var _up = document.getElementById('pullUp');
        var _con = document.getElementById('container');

        var iScroll = new IScroll('#container', {
            mouseWheel: true,
            scrollbars: true,
            probeType: 3
        })

        iScroll.on('scroll', function() {
            if(this.y >= 50) {
                _down.style.display = 'block';
                return;
            } else if(this.y < 50 && this.y >= 0) {
                _down.style.display = 'none';
                return;
            }


            if(this.maxScrollY - this.y > 50) {
                //alert('上拉刷新');
                _up.style.display = 'block';
                return;
            } else if(this.maxScrollY - this.y > 0 && this.maxScrollY - this.y <50 ){
                _up.style.display = 'none'
                return;
            }
        })

        _con.onmouseup = function(){
            if(iScroll.y > 50 || iScroll.maxScrollY - iScroll.y > 50){
                setTimeout(function(){
                    iScroll.refresh();
                },300)
            }
        }
    </script>

</html>