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.htm