html5实现移动端下拉刷新（原理和代码）

时间2024-01-23 14:44:20发布访客分类HTML浏览235

导读：收集整理的这篇文章主要介绍了html5实现移动端下拉刷新（原理和代码），觉得挺不错的，现在分享给大家，也给大家做个参考。这篇文章给大家介绍的内容是关于htML5实现移动端下拉刷新（原理和代码），有一定的参考价值，有需要的朋友可以参考一下，希...

收集整理的这篇文章主要介绍了html5实现移动端下拉刷新（原理和代码），觉得挺不错的，现在分享给大家，也给大家做个参考。这篇文章给大家介绍的内容是关于htML5实现移动端下拉刷新（原理和代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

移动端的下拉刷新是一个很常见的功能，也有许多开源库实现了这个功能，不过为了学习，还是先自己写一个例子学习一下。其中用到了一些touch事件和一些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中的transform和aniMATE。因为既然都是移动端了，这些东西基本上都支持了。
具体看代码吧，注释也有。本文只是讲解原理，后续将会对其进行封装成一个对象。方便直接调用。