집 > 기사 > 웹 프론트엔드 > HTML5는 모바일 터미널에서 풀다운 새로 고침을 구현합니다(원리 및 코드)

HTML5는 모바일 터미널에서 풀다운 새로 고침을 구현합니다(원리 및 코드)

不言원래의: 2018-08-01 11:48:3117130검색

이 글은 모바일 풀다운 새로고침의 HTML5 구현에 대해 소개합니다(원리 및 코드). 필요한 친구들이 참고할 수 있기를 바랍니다.

모바일 측에서 풀다운 새로 고침은 매우 일반적인 기능이며, 이 기능을 구현하는 오픈 소스 라이브러리가 많이 있습니다. 그러나 배우기 위해서는 작성하는 것이 좋습니다. 그것을 배우기 위해 스스로 예를 들어보십시오. 일부 터치 이벤트와 일부 DOM 속성 CSS3 속성이 사용됩니다. 코드로 직접 이동하면 코드에 주석이 있습니다.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <style type="text/css">
        html,
        body,
        header,
        p,
        main,
        p,
        span,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        #refreshContainer li {
            background-color: #eee;
            margin-bottom: 1px;
            padding: 20px 10px;
        }

        .refreshText {
            position: absolute;
            width: 100%;
            line-height: 50px;
            text-align: center;
            left: 0;
            top: 0;
            transform: translateY(-50px);
        }
    </style>
</head>

<body>
    <main class="parent">
        <p class="refreshText"></p>
        <ul id="refreshContainer">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
        </ul>
    </main>
    <script type="text/javascript">
        window.onload = function(){
            //1.获取到列表的dom，刷新显示部分的dom，列表父容器的dom
            let container = document.querySelector('#refreshContainer');
            let refreshText = document.querySelector('.refreshText');
            let parent = document.querySelector('.parent');

            //2.定义一些需要常用的变量
            let startY = 0;//手指触摸最开始的Y坐标
            let endY = 0;//手指结束触摸时的Y坐标
           
            //3.给列表dom监听touchstart事件,得到起始位置的Y坐标
            parent.addEventListener('touchstart',function(e){
                startY = e.touches[0].pageY;
            });
            //4.给列表dom监听touchmove事件，当移动到一定程度需要显示上面的文字
            parent.addEventListener('touchmove',function (e) { 
                if(isTop() && (e.touches[0].pageY-startY) > 0){
                    console.log('下拉了');
                    refreshText.style.height = "50px";
                    parent.style.transform = "translateY(50px)";
                    parent.style.transition = "all ease 0.5s";
                    refreshText.innerHTML = "释放立即刷新...";
                }
            });
            //5.给列表dom监听touchend事件，此时说明用户已经松开了手指，应该进行异步操作了
            parent.addEventListener('touchend',function (e) { 
                if(isTop()){
                    refreshText.innerHTML = "正在刷新...";
                    setTimeout(function(){
                        parent.style.transform = "translateY(0)";
                        console.log('成功刷新');
                    },2000)
                }
                return;
            })
            function isTop(){
                var t = document.documentElement.scrollTop||document.body.scrollTop;
                return t === 0 ? true : false;
            }

        }
    </script>
</body>

</html>

CSS3의 변환 및 애니메이션이 사용됩니다. 왜냐하면 다 모바일이기 때문에 이런 것들은 기본적으로 지원되기 때문이죠.
자세한 내용은 코드를 봐주세요. 댓글도 있습니다. 이 글에서는 원리만 설명하고 나중에 객체로 캡슐화할 예정입니다. 직접 전화하시면 편리합니다.

HTML5는 모바일 터미널에서 풀다운 새로 고침을 구현합니다(원리 및 코드)

관련 기사