基于iscroll 5 的上拉加载下拉刷新

<!DOCTYPE html>
<html>
<head>
    <meta 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">
    <title>iScroll demo: simple</title>
    <script type="text/javascript" src="script/iscroll.js"></script>
    <script type="text/javascript" src="script/iscroll-probe.js"></script>
    <script type="text/javascript">

        var myScroll;

        function loaded() {
            // loLoading();
            myScroll = new IScroll('#wrapper', { mouseWheel: true, probeType: 3 });
            document.getElementById("logsssss").innerHTML = myScroll.maxScrollY;
            var pos_s = (document.documentElement.clientWidth - 200) / 2;//窗口宽度-背景图宽度的一半
            var scroll_height = document.getElementById("wrapper").clientHeight;
            var Direction = 0;
            var IsHead = false;//是否到了最上
            var IsLast = false;//是否到了最下
            var IsRefreshing = false;//是否刷新中
            var IsLoading = false;//是否加载中
            var IsFirst = false;
            myScroll.on("scrollStart", function () {
                Direction = this.y;
                if (Math.abs(Direction) - 2 < 0) {//从最上边开始拉
                    IsHead = true;
                    IsLast = false;
                    document.getElementById("logsssss").innerHTML = "最上边";
                } else if (Math.abs(Direction) + myScroll.maxScrollY < 2) {//从最下边开始往下拉
                    IsLast = true;
                    IsHead = false;
                    document.getElementById("logsssss").innerHTML = "最下边";
                }
            });
            var wrapper = document.getElementById("wrapper");
            myScroll.on("scroll", function () {
                if (IsHead) {
                    document.getElementById("logsssss").innerHTML = "松开刷新" + this.y;
                    if (this.y > 0) {
                        wrapper.style.backgroundPosition = pos_s + "px " + (this.y - 40) + "px";
                        if (this.y > 40) {

                            document.getElementById("logsssss").innerHTML = "0px " + this.y + "px";;
                            wrapper.style.backgroundImage = "url(script/img/step2.png)";
                            // wrapper.style.backgroundSize = "auto " + this.y + "px";
                            IsRefreshing = true;

                        } else {
                            wrapper.style.backgroundImage = "url(script/img/step1.png)";
                        }

                    } else {
                        IsHead = false;
                    }
                }
                if (IsLast) {

                    var distance = this.y - myScroll.maxScrollY;

                    if (distance < 2) {
                        document.getElementById("logsssss").innerHTML = pos_s + "px " + Math.round((scroll_height - 40 + distance)) + "px";
                        wrapper.style.backgroundPosition = pos_s + "px " + Math.round((scroll_height + distance)) + "px";
                        wrapper.style.backgroundImage = "url(script/img/step3.png)";
                        if (Math.abs(distance) > 40) {
                            IsLoading = true;
                        }
                    } else {
                        IsLast = false;
                    }
                }

            })
            myScroll.on("scrollEnd", function () {
                if (IsRefreshing) {
                    IsRefreshing = false;
                    loLoading();
                }
                if (IsLoading) {
                    IsLoading = false;
                    loLoading();
                }
            });

            document.getElementById('me').addEventListener('tap', function () {
                this.style.background = !this.style.background ? '#a00' : '';
            }, false);

        }

        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        function loLoading() {
            var precent = 0;
            var loadbar = setInterval(function () {
                precent += 2;

                if (precent >= 98) {
                    precent = 98;

                    clearInterval(loadbar);
                }
                document.getElementById("loading").style.width = precent + "%";
            }, 50)
            //如果有新数据加载进来，则myScroll.refresh()
        }
    </script>
    <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 */
        }

        .step1 {
        }

        #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;
            background-image: url(script/img/step1.png);
            background-repeat: no-repeat;
            background-position: 0px 0px;
            background-size: 200px 40px;
        }

        #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;
            }
    </style>
</head>

<body onload="loaded()">
    <div id="logsssss" style="color:#fff; width: 200px; position: fixed; bottom: auto; top: 0; left: auto; right: 0; z-index:9999; background-color: rgba(0,0,0,0.3)">日志</div>
    <div id="header">上下拉刷新</div>
    <div style="width:100%; height:1px; position:fixed; top:45px; z-index:99999">
        <div id="loading" style="width: 0%; height: 1px; background-color: #00fe06"></div>
    </div>
    <div id="wrapper">

        <div id="scroller">
            <ul>
                <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>
                <li>Pretty row 21</li>
                <li>Pretty row 22</li>
                <li>Pretty row 23</li>
                <li>Pretty row 24</li>
                <li>Pretty row 25</li>
                <li>Pretty row 26</li>
                <li>Pretty row 27</li>
                <li>Pretty row 28</li>
                <li>Pretty row 29</li>
                <li>Pretty row 30</li>
                <li>Pretty row 31</li>
                <li>Pretty row 32</li>
                <li>Pretty row 33</li>
                <li>Pretty row 34</li>
                <li>Pretty row 35</li>
                <li>Pretty row 36</li>
                <li>Pretty row 37</li>
                <li>Pretty row 38</li>
                <li>Pretty row 39</li>
                <li>Pretty row 40</li>
                <li>Pretty row 41</li>
                <li>Pretty row 42</li>
                <li>Pretty row 43</li>
                <li>Pretty row 44</li>
                <li>Pretty row 45</li>
                <li>Pretty row 46</li>
                <li>Pretty row 47</li>
                <li>Pretty row 48</li>
                <li>Pretty row 49</li>
                <li>Pretty row 50</li>
            </ul>
        </div>
    </div>
    <div id="footer"></div>
</body>
</html>
<script>

</script>

基于iscroll 5 的上拉加载下拉刷新

猜你喜欢