ClassContent/历届学生/font-end-nine/项目练习/上课项目/js案例/下拉滚动代码/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉刷新</title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .header {
            width: 100%;
            height: 45px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            background: #fff;
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            box-sizing: border-box;
            border-bottom: 1px solid #dadada;
        }

        .header img {
            width: 20px;
            height: 20px;
        }


        .content {
            margin-top: 45px;
        }

        .content li {
            height: 40px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #dadada;
            padding: 0 10px;
        }

        .refresh {
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            position: fixed;
            left: 50%;
            z-index: 998;
            background: #fff;
            border-radius: 100%;
            box-shadow: 0px 0px 9px #858585;
            margin-left: -15px;
            transition: all 0.1s;
        }

        .refresh img {
            width: 100%;
            height: 100%;
        }

        .rotate {
            animation: rotateAction 1s linear infinite;
        }

        @keyframes rotateAction {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>

    <div class="header">
        <img src="./back.png" alt="">
        <span>热门视频</span>
        <span></span>
    </div>

    <ul class="content">
        <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>列表11</li>
        <li>列表12</li>
        <li>列表13</li>
        <li>列表14</li>
        <li>列表15</li>
        <li>列表16</li>
        <li>列表17</li>
        <li>列表18</li>
        <li>列表19</li>
        <li>列表20</li>
        <li>列表21</li>
        <li>列表22</li>
        <li>列表23</li>
        <li>列表24</li>
        <li>列表25</li>
        <li>列表26</li>
        <li>列表27</li>
        <li>列表28</li>
        <li>列表29</li>
        <li>列表30</li>
        <li>列表31</li>
        <li>列表32</li>
        <li>列表33</li>
        <li>列表34</li>
        <li>列表35</li>
        <li>列表36</li>
        <li>列表37</li>
        <li>列表38</li>
        <li>列表39</li>
        <li>列表40</li>
    </ul>

    <div class="refresh" style="top: 10px;">
        <img src="./refresh.png" alt="">
    </div>
</body>


<script>

    var startY = 0, moveY = 0, endY = 0;

    if (isTop()) {
        addMove();
    } else {
        window.addEventListener('scroll', () => isTop() ? addMove() : '')
    }



    function addMove() {
        $(".content").addEventListener('touchstart', (e) => {
            startY = e.targetTouches[0].pageY
        });

        $(".content").addEventListener('touchmove', (e) => {
            if (isTop()) {
                moveY = e.targetTouches[0].pageY;
                if (moveY > startY) {
                    // 必须要阻止默认事件，如果不阻止会和页面的滚动相互冲突
                    e.preventDefault();
                    var sTop = moveY - startY;

                    if (sTop <= 120) {
                        $(".refresh").style = `
                          top: ${sTop}px;
                          transform: rotate(${sTop * 3}deg);
                        `;
                    }
                }
            }
        });

        $(".content").addEventListener('touchend', (e) => {
            endY = e.changedTouches[0].pageY;
            var eTop = endY - startY;

            if (eTop <= 60) {
                $(".refresh").style = `
                    top: 10px;
                    transform: rotate(0deg);
                `;
            } else {
                $(".refresh").className = "refresh rotate"
                $(".refresh").style = `
                    top: 80px;
                    transform: rotate(0}deg);
                `;

                

                setTimeout(() => {
                    $(".refresh").style = `
                        top: 10px;
                        transform: rotate(0deg);
                    `;
                    $(".refresh").className = "refresh"

                }, 2000)
            }
        });
    }

    function isTop() {
        return document.documentElement.scrollTop === 0 ? true : false
    }

    function $(className) {
        return document.querySelector(className)
    }
</script>

</html>