-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
134 lines (131 loc) · 4.02 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉刷新</title>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0' name='viewport' />
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="css/foundation-icons.css">
</head>
<body>
<style>
* {
padding:0;
margin:0
}
#pullBar {
height:40px;
line-height:40px;
margin-top:-40px;
text-align: center;
color:black;
background-image: linear-gradient(top, rgb(255, 255, 255) 7%, rgb(228, 229, 240) 100%);
background-image: -o-linear-gradient(top, rgb(255, 255, 255) 7%, rgb(228, 229, 240) 100%);
background-image: -moz-linear-gradient(top, rgb(255, 255, 255) 7%, rgb(228, 229, 240) 100%);
background-image: -webkit-linear-gradient(top, rgb(255, 255, 255) 7%, rgb(228, 229, 240) 100%);
background-image: -ms-linear-gradient(top, rgb(255, 255, 255) 7%, rgb(228, 229, 240) 100%);
}
#pullBar i {
font-size:20px;
vertical-align:-2px;
}
#pullBar .fi-loop {
display:inline-block;
-moz-animation:rotate 2s linear infinite;
-webkit-animation:rotate 2s linear infinite;
animation:rotate 2s linear infinite;
}
#pullBar .fi-x {
float:right;
margin-right:.5em;
}
.trans {
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-ms-transition:all 0.3s;
transition:all 0.3s;
}
.shown {
-webkit-transform:translateY(40px);
-moz-transform:translateY(40px);
-ms-transform:translateY(40px);
transform:translateY(40px);
}
@-moz-keyframes rotate {
0% {
-moz-transform:rotate(0deg);
}
100% {
-moz-transform:rotate(360deg);
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
}
}
</style>
<div id="wrapper">
<div class="jumbotron">
<h1>下拉刷新模块</h1>
</div>
<h4>说明</h4>
<ul>
<li>使用移动设备，或开启chrome的触摸模拟。</li>
<li>Zepto、jQuery插件形式。</li>
<li>下拉屏幕，出现刷新提示条。</li>
<li>使用CSS3制作动画效果，非TOP实现，性能更好。</li>
<li>使用了字体符号，非图片。</li>
<li>问题列表
<ul>
<li>AJAX异步，无法捕捉return，改为同步后async:false需要大数据量测试（模拟延迟）
<span class="label label-danger">等待</span>
</li>
<li>非首屏下拉触发
<span class="label label-danger">FIXED</span>
</li>
<li>上滑+冒泡
<span class="label label-danger">FIXED</span>
</li>
</ul>
</li>
</ul>
<h4>调用</h4>
<blockquote>
<code><script type="text/javascript" src="js/pull.js"></script></code>
<pre>$('#wrapper').pullBar();</pre>
</blockquote>
</div>
<script src="js/zepto.js"></script>
<script src="js/pull.js"></script>
<script>
$('#wrapper').pullBar({
callback: function() {
var res = true;
$.ajax({
url: '/demo/slider/1.json',
async: false,
success: function(data) {
res = true;
},
error: function(data) {
res = false;
}
})
return res;
}
});
</script>
</body>
</html>