使用 JavaScritpt html5 模拟 APP 页面实现下拉正在刷新功能

学习笔记 转载 2017-06-15 21:55:23 95 0

【摘要】在APP中,页面下拉刷给用户操作带来了极大的便利性。但这一效果能否在手机端的Web页中使用呢?答案是肯定的。利用HTML5中的touchstart、touchmove和touchend事件,可以模拟出类似手机APP的页面下拉刷新效果。

完整源代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  6. <title>JavaScritpt H5 模拟APP页面下拉刷新</title>
  7. <style type="text/css">
  8.     body {background-color: #9c9c9c;}
  9.     #downRefresh{margin-top: 0; width: 100%;}
  10.     #down, #refresh{width: 100%; height: 50px; display: none; }
  11.     #down{height: 20px;}
  12.     #down>p, #refresh>p{margin: 20px auto; text-align:center; font-size: 14px; color: #fff;}
  13.     img{width:80%;}
  14. </style>
  15. </head>
  16. <body>
  17.     <div id="content">
  18.         <div id="downRefresh">
  19.             <div id="down">
  20.                 <p>正在下拉,释放后刷新</p>
  21.             </div>
  22.             <div id="refresh">
  23.                 <p>正在刷新 ...</p>
  24.             </div>
  25.         </div>
  26.         <div class="myContent">
  27.             <img src="/public/blog/home/style/images/myphoto.jpg" >
  28.         </div>
  29.     </div>
  30.     <script type="text/javascript">
  31.     //第一步,下拉
  32.     function downRefreshStep1(dist){  
  33.         //拉长背景以模拟拉伸效果
  34.         var down = document.getElementById("down");
  35.         var refresh = document.getElementById("refresh");
  36.         refresh.style.display = "none";
  37.         down.style.display = "block";
  38.         down.style.height = (parseInt("20px") - dist) + "px";
  39.     }
  40.     //第二步,下拉完成,释放后开始刷新
  41.     function downRefreshStep2(){ 
  42.         var down = document.getElementById("down");
  43.         var refresh = document.getElementById("refresh");
  44.         down.style.display = "none";
  45.         down.style.height = "20px";
  46.         refresh.style.display = "block";
  47.     }
  48.     //第三步,刷新完成关闭提示区
  49.     function downRefreshStep3(){ 
  50.         var down = document.getElementById("down");
  51.         var refresh = document.getElementById("refresh");
  52.         down.style.display = "none";
  53.         refresh.style.display = "none";
  54.     }
  55.     //objId表示事件绑定对象,即:执行下拉刷新的对象
  56.     function downRefresh(objId, way){
  57.         var _content = document.getElementById(objId);
  58.         var _start = 0;
  59.         var _end = 0;
  60.         _content.addEventListener("touchstart", touchStart, false);
  61.         _content.addEventListener("touchmove", touchMove, false);
  62.         _content.addEventListener("touchend", touchEnd, false);
  63.         //touchstart事件监听
  64.         function touchStart(event){ 
  65.             var touch = event.targetTouches[0];
  66.             if(way == "x"){ 
  67.                 _start = touch.pageX;
  68.             }else{ 
  69.                 _start = touch.pageY;
  70.             }
  71.         }
  72.         //touchmove事件监听
  73.         function touchMove(event){ 
  74.             var touch = event.targetTouches[0];
  75.             if(way == "x"){ 
  76.                 _end = (_start - touch.pageX);
  77.             }else{ 
  78.                 _end = (_start - touch.pageY);
  79.                 //页面下拉,进入第一步,提示:正在下拉,释放后刷新
  80.                 if(_end < 0){
  81.                     downRefreshStep1(_end);
  82.                 }
  83.             }
  84.         }
  85.         //touchend事件监听
  86.         function touchEnd(event){ 
  87.             if(_end >0){ 
  88.                 console.log("左滑或上滑"+_end);
  89.             }else{ 
  90.                 console.log("右滑或下滑"+_end);
  91.                 //下拉结束,进入第二步:正在刷新 ...
  92.                 downRefreshStep2();
  93.                 //模拟刷新成功,进入第三步,关闭提示区
  94.                 setTimeout(function(){ 
  95.                     downRefreshStep3();
  96.                 }, 2500);
  97.             }
  98.         }
  99.     }
  100.     //调用downRefresh方法,执行下滑刷新
  101.     downRefresh("content", "y");
  102.     </script>
  103. </body>
  104. </html>

将上面代码直接复制到 html 文件中,然后在手机端访问该文件,即可实现该效果。(注意:需要更换图片)

效果如下图所示:

请输入图片名称

版权归 马富天PHP博客 所有

本文标题:《使用 JavaScritpt html5 模拟 APP 页面实现下拉正在刷新功能》

本文链接地址:http://www.mafutian.net/263.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 使用原生 js/JavaScript 使用表单全选、全不选 》 下一篇《 基于 DOM 型的 XSS 漏洞举例,XSS举例 》

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多