下拉頂部刷新簡單實現

時間 2019-11-29
標籤下拉頂部刷新簡單實現简体版
原文原文鏈接
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
 6     <title>下拉頂部刷新</title>
 7     <style>
 8  #slideDown{margin-top: 0;width: 100%;}
 9  #slideDown1,#slideDown2{width: 100%;height: 70px;;background: #e9f4f7;display: none;}
 10  #slideDown1{height: 20px;}
 11  #slideDown1>p,#slideDown2>p{margin: 20px auto;text-align:center;font-size: 14px;color: #37bbf5;}
 12     </style>
 13 </head>
 14 <body>
 15 <div id="content">
 16     <div id="slideDown">
 17         <div id="slideDown1">
 18             <p>鬆開刷新</p>
 19         </div>
 20         <div id="slideDown2">
 21             <p>正在刷新 ...</p>
 22         </div>
 23     </div>
 24     <div class="myContent">
 25         <ul>
 26             <li>item1 -- item1 -- item1</li>
 27             <li>item2 -- item2 -- item2</li>
 28             <li>item3 -- item3 -- item3</li>
 29             <li>item4 -- item4 -- item4</li>
 30             <li>item5 -- item5 -- item5</li>
 31             <li>item6 -- item6 -- item6</li>
 32             <li>item7 -- item7 -- item7</li>
 33         </ul>
 34     </div>
 35 </div>
 36 <script>
 37     //第一步：下拉過程
 38     function slideDownStep1(dist){ // dist 下滑的距離，用以拉長背景模擬拉伸效果
 39         var slideDown1 = document.getElementById("slideDown1"),  40  slideDown2 = document.getElementById("slideDown2");  41  slideDown2.style.display = "none";  42  slideDown1.style.display = "block";  43  slideDown1.style.height = (parseInt("20px") - dist) + "px";  44  }  45     //第二步：下拉，而後鬆開，
 46     function slideDownStep2(){  47         var slideDown1 = document.getElementById("slideDown1"),  48  slideDown2 = document.getElementById("slideDown2");  49  slideDown1.style.display = "none";  50  slideDown1.style.height = "20px";  51  slideDown2.style.display = "block";  52         //刷新數據
 53         //location.reload();
 54  }  55     //第三步：刷新完成，迴歸以前狀態
 56     function slideDownStep3(){  57         var slideDown1 = document.getElementById("slideDown1"),  58  slideDown2 = document.getElementById("slideDown2");  59  slideDown1.style.display = "none";  60  slideDown2.style.display = "none";  61  }  62 
 63     //下滑刷新調用
 64  k_touch("content","y");  65     //contentId表示對其進行事件綁定，way==>x表示水平方向的操做，y表示豎直方向的操做
 66     function k_touch(contentId,way){  67         var _start = 0,  68  _end = 0,  69  _content = document.getElementById(contentId);  70  _content.addEventListener("touchstart",touchStart,false);  71  _content.addEventListener("touchmove",touchMove,false);  72  _content.addEventListener("touchend",touchEnd,false);  73         function touchStart(event){  74             //var touch = event.touches[0]; //這種獲取也能夠，但已不推薦使用
 75 
 76             var touch = event.targetTouches[0];  77             if(way == "x"){  78  _start = touch.pageX;  79  }else{  80  _start = touch.pageY;  81  }  82  }  83         function touchMove(event){  84             var touch = event.targetTouches[0];  85             if(way == "x"){  86  _end = (_start - touch.pageX);  87  }else{  88  _end = (_start - touch.pageY);  89                 //下滑才執行操做
 90                 if(_end < 0){  91  slideDownStep1(_end);  92  }  93  }  94 
 95  }  96         function touchEnd(event){  97             if(_end >0){  98  console.log("左滑或上滑 "+_end);  99  }else{ 100  console.log("右滑或下滑"+_end); 101  slideDownStep2(); 102                 //刷新成功則
103                 //模擬刷新成功進入第三步
104  setTimeout(function(){ 105  slideDownStep3(); 106  },2500); 107  } 108  } 109  } 110 
111 </script>
112 </body>
113 </html>
原文地址:http://developer.51cto.com/art/201505/476334.htmhtml
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。