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

互联网 18-8-1

这篇文章给大家介绍的内容是关于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>