first commit

历届学生/font-end-nine/项目练习/学生项目/张婷/练习/案例自写/0621/下拉刷新.html

@@ -0,0 +1,302 @@
+<!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>Document</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: 15px;
+            height: 20px;
+            transform: scale(0.6);
+        }
+
+
+        .content {
+            margin-top: 45px;
+            /* touch-action: none; */
+        }
+
+        .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="../../../作业/img/64/左.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="../../../作业/img/64/朋友圈.png" alt="">
+    </div>
+</body>
+<!-- 1 获取事件；   2 绑定事件；    3 事件处理函数。 -->
+
+<!-- 思路：首先刷新这个方法是在滚动条到顶部的时候才会触发，因此要先判断滚动条是否在顶部，
+          然后再去调用该方法。然后去生成下拉刷新这一项功能：首先监听它的y值，开始/移动/结束
+          三过程，在移动的时候，为避免滚动条和下拉刷新事件冲突，因此要设置
+          避免默认事件e.preventDefault();
+
+    甲方需求：当滚动条到达顶部时，达到阈值，下拉刷新，否则无法触发该事件。 -->
+<script>
+// 知识拓展：pageX/pageY:
+    // 鼠标相对于整个页面的X/Y坐标。
+    // 注意，整个页面的意思就是你整个网页的全部。
+    // 比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。
+    
+// screenX/screenY：
+    // 鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过屏幕分辨率。
+
+
+
+    // function isTop() {
+    //     if(document.documentElement.scrollTop === 0){
+    //         return true
+    //     }else{
+    //         return false
+    //     }
+    //     // return document.documentElement.scrollTop === 0 ? true : false
+    // }
+
+
+
+    // if (isTop()) {
+    //     addMove();
+    // } else {
+    //     window.addEventListener('scroll', ()=>{
+    //         // () => isTop() ? addMove() : ''
+    //         if( isTop() ){
+    //             addMove()
+    //         }
+    //     })
+    // }
+
+
+    function $(className) {
+        if (document.querySelectorAll(className).length > 1) {
+            return document.querySelectorAll(className)
+        } else {
+            return document.querySelector(className)
+        }
+    }
+
+
+
+    //  首先判断是否到达顶部，到达顶部返回true，否则false，定义一个方法判断顶部。
+    //  当在顶部的时候，调用刷新方法，不是顶部的时候，再为空。
+    function ifTop() {
+        if (document.documentElement.scrollTop == 0) {
+            return true
+        } else {
+            return false
+        }
+    }
+
+
+    // 判断是否为true，是就调用方法，不是则监听判断是否为0，是的时候调用
+    if (ifTop()) {
+        Refresh();
+        console.log('Refresh');
+    } else {
+        window.addEventListener('scroll', function () {
+            if (ifTop()) {
+                console.log('scroll',ifTop());
+                Refresh()
+            }
+        })
+    }
+
+
+    var startY = 0, moveY = 0, endY = 0;
+    
+    function Refresh() {
+
+        // 获取开始的Y值
+        $('.content').addEventListener('touchstart', (e) => {
+            startY = e.targetTouches[0].pageY
+            console.log('touchstart');
+        });
+
+        // 获取移动的y值，首先判断页面状态，是true才继续下一步
+        $('.content').addEventListener('touchmove', (e) => {
+            console.log('touchmove',ifTop());
+            // 页面状态true
+            if (ifTop()) {
+
+                // 获取移动的y值
+                moveY = e.targetTouches[0].pageY
+                // 判断是否为下拉
+                if (moveY > startY) {
+                    console.log('preventDefault');
+                    // 防止向下浏览和向下刷新冲突，故阻止默认事件
+                    e.preventDefault();
+                    // 获取移动距离
+                    var distanceY = moveY - startY;
+                    // 当移动距离在100以内时，改变图标距离
+                    if (distanceY <= 120) {
+                        // 120*3=360跟手刚好一圈
+                        $('.refresh').style = `
+                            top:${distanceY}px;
+                            transform:rotate(${distanceY * 3}deg);`;
+                        console.log(distanceY);
+                    }
+                }
+            }
+        });
+
+
+        // 获取结束y值
+        $('.content').addEventListener('touchend', (e) => {
+            // if(!ifTop()) return;
+
+            // 特别注意这里是changedTouches！！！！
+            var endY = event.changedTouches[0].pageY;
+
+            var distanceY = endY - startY;
+
+
+            if (distanceY <= 50) {
+                $('.refresh').style = `
+                    top:10px;
+                    transform:rotate(0deg);`;
+            }else {
+
+                // 添加了一个rotate包含了 animation: rotateAction 1s linear infinite;
+                // 以及@keyframes rotateAction，从0到360
+
+                $(".refresh").className = "refresh rotate"
+                // top: 80px;是为了固定图标悬浮转动的位置，无论大与小都固定在80px开始旋转
+                $('.refresh').style = `
+                    top: 80px;
+                    transform: rotate(0deg);`;//手动将旋转角度清为0，因为@keyframes rotateAction是从0开始
+                    //如果不清0，旋转会从上次的值跳到0在开始
+
+
+                    // 定时器，2秒以后再消失恢复默认
+                    setTimeout(() =>{
+                        $('.refresh').style = `
+                        top: 10px;
+                        transform: rotate(0}deg);`;
+                        $(".refresh").className = "refresh"
+                    },2000)
+
+            }
+        })
+    }
+
+
+</script>
+
+</html>