Skip to content

Commit f9694d9

Browse files
littledulittledu
littledu
authored and
littledu
committed
0.2.2
1 parent 49ef819 commit f9694d9

File tree

5 files changed

+164
-48
lines changed

5 files changed

+164
-48
lines changed

‎README.md

+15-3
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,12 @@ new PageSlider({
6868
animationPlayOnce: false //可选，切换页面时，动画只执行一次
6969
dev: false, //可选，开发模式，传入具体页面索引值
7070
oninit: function () {}, //可选，初始化完成时的回调
71-
onbeforechange: function () {} //可选，开始切换前的回调
72-
onchange: function () {} //可选，每一屏切换完成时的回调
71+
onbeforechange: function () {}, //可选，开始切换前的回调
72+
onchange: function () {}, //可选，每一屏切换完成时的回调
73+
onSwipeUp: function () {}, //可选，swipeUp 回调
74+
onSwipeDown: function () {}, //可选，swipeDown 回调
75+
onSwipeLeft: function () {}, //可选，swipeLeft 回调
76+
onSwipeRight: function () {} //可选，swipeRight 回调
7377
});
7478
```
7579

@@ -170,6 +174,10 @@ new PageSlider({
170174
```
171175
在 `.page` 元素上设置 `-webkit-overflow-scrolling: touch;` 可触发原生的平滑滚动，让滚动效果体验更舒服，不设置也可以，但效果相差很大; 内层需设置一个大于屏幕的高度值，才会触发此效果，如果不设置，默认是遍历直接的子元素高度和来跟屏幕高度作比较判断是否是长内容页。
172176

177+
178+
### 8. 第一次向下/向上滑时不触发翻页，第二次时再翻页
179+
有时候，会遇到这样的需求，页面有隐藏的一些内容，但需要在第一次向下滑的时候才显示出来，这时要禁止翻页，然后交互完成后再滑才是翻页，这里提供了个示例以方便用户参考，具体查看下面 example。
180+
173181
## example
174182

175183
### 1. default
@@ -196,15 +204,19 @@ new PageSlider({
196204

197205
<a href="http://littledu.github.io/PageSlider/example/html/longpage.html" target="_blank"><img src="http://littledu.github.io/PageSlider/cli/longpage.png"></a>
198206

207+
### 7. 第一次滑屏不翻页，第二次滑屏才翻页
208+
209+
<a href="http://littledu.github.io/PageSlider/example/html/doubleSwipe.html" target="_blank"><img src="http://littledu.github.io/PageSlider/cli/doubleSwipe.png"></a>
210+
199211
## TODO
200212
看后面需求是否有必要实现如下功能：
201213

202214
1. scale 的动画切换方式
203215
2. cover 的动画切换方式
204-
3. 支持内容超出一屏先滚完再翻页[0.2.1 已支持]
205216

206217
## Releases
207218

219+
#### 0.2.2 增加多一个翻页示例，增加多 4 个 onSwipeUp 等回调接口，增加 prevIndex 索引
208220
#### 0.2.1 增加只执行一次动画，onbeforechange 回调，内容超出一屏先滚完再翻页 功能。
209221
#### 0.2.0 基于 zepto 重写，去除 预加载 等功能。
210222
#### 0.1.0 实现基本功能。

‎cli/doubleSwipe.png

102 KB
Loading

‎example/html/doubleSwipe.html

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
6+
<meta content="yes" name="apple-mobile-web-app-capable">
7+
<meta content="black" name="apple-mobile-web-app-status-bar-style">
8+
<meta name="format-detection" content="telephone=no, email=no">
9+
<title>doubleSwipe</title>
10+
<link rel="stylesheet" href="../css/style.css"/>
11+
<!--custom style-->
12+
<style>
13+
.current .title{
14+
-webkit-animation: slideToTop .8s ease both;
15+
}
16+
17+
.current .subtitle{
18+
-webkit-animation: slideToTop .8s 0.3s ease both;
19+
}
20+
21+
.double{
22+
text-align: center;
23+
display: none;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<div class="page-wrap">
29+
<div class="page page1" data-lock-next="true">
30+
<div class="title">page one</div>
31+
<div class="subtitle">滑一下不翻页示例</div>
32+
<div class="double">这是第一次滑动时的动作</div>
33+
<div class="arrow"></div>
34+
</div>
35+
36+
<div class="page">
37+
<div class="title">page two</div>
38+
<div class="subtitle">page two subtitle</div>
39+
<div class="arrow"></div>
40+
</div>
41+
<div class="page">
42+
<div class="title">page three</div>
43+
<div class="subtitle">page three subtitle</div>
44+
<div class="arrow"></div>
45+
</div>
46+
<div class="page">
47+
<div class="title">page four</div>
48+
<div class="subtitle">page four subtitle</div>
49+
</div>
50+
</div>
51+
52+
<script src="../js/zepto_modify.js"></script>
53+
<script src="../js/PageSlider.js"></script>
54+
<script>
55+
var pageSlider = new PageSlider({
56+
pages: $('.page-wrap .page'),
57+
onSwipeUp: function(){
58+
if(this.index === 0){
59+
var page = $(this.pages).eq(0);
60+
page.find('.double').show();
61+
page.data('lock-next', false);
62+
}
63+
},
64+
onchange: function(){
65+
if(this.prevIndex === 0){
66+
var page = $(this.pages).eq(0);
67+
page.find('.double').hide();
68+
page.data('lock-next', true);
69+
}
70+
}
71+
});
72+
</script>
73+
</body>
74+
</html>

‎example/js/PageSlider.js

+40-23
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
*/
44
/**
55
* @author : littledu
6-
* @version : 0.2.1
7-
* @date : 2015-06-28
6+
* @version : 0.2.2
7+
* @date : 2015-07-08
88
* @repository: https://github.com/littledu/PageSlider
99
*/
1010

@@ -20,6 +20,14 @@
2020
preventDefault: true,
2121
animationPlayOnce: false,
2222
dev: false, //开发模式，传入数值，直接跳到正在开发的屏数
23+
onSwipeUp: function () { //swipeUp 回调
24+
},
25+
onSwipeDown: function () {//swipeDown 回调
26+
},
27+
onSwipeLeft: function () {//swipeLeft 回调
28+
},
29+
onSwipeRight: function () {//swipeRight 回调
30+
},
2331
oninit: function () { //初始化完成时的回调
2432
},
2533
onbeforechange: function () { //开始切换前的回调
@@ -110,7 +118,10 @@
110118
this.lastVisitedIndex = this._getLastVisited();
111119
}
112120

113-
this.moveTo(this.index, true);
121+
//初始化时不再直接调用 moveTo, 免得初始化时还会回调一次 onchange 等接口 from 0.2.2
122+
//this.moveTo(this.index, true);
123+
this.target.css('-webkit-transform', 'translate3d(0, 0, 0)');
124+
this.pages.eq(0).addClass(this.currentClass);
114125

115126
this.oninit.call(this);
116127

@@ -223,29 +234,34 @@
223234
this._setTransition();
224235

225236
//swipeDown
226-
if (distance > 0 && !lockPrev) {
227-
228-
//如果是长页面，需判断一下是否到顶
229-
if (curPage[0].pageScrollHeight && pageScrollTop > pageHeight) {
230-
return;
231-
} else if (distance > 20) {
232-
this.prev();
233-
} else {
234-
this.moveTo(this.index);
237+
if (distance > 0) {
238+
this.direction === 'v' ? this.onSwipeDown.call(this) : this.onSwipeRight.call(this);
239+
240+
if (!lockPrev) {
241+
//如果是长页面，需判断一下是否到顶
242+
if (curPage[0].pageScrollHeight && pageScrollTop > pageHeight) {
243+
return;
244+
} else if (distance > 20) {
245+
this.prev();
246+
} else {
247+
this.moveTo(this.index);
248+
}
235249
}
236-
237250
}
238251

239252
//swipeUp
240-
if (distance < 0 && !lockNext) {
241-
242-
//如果是长页面，需判断一下是否到底
243-
if (curPage[0].pageScrollHeight && pageScrollTop < curPage[0].pageScrollHeight) {
244-
return;
245-
} else if (distance < -20) {
246-
this.next();
247-
} else {
248-
this.moveTo(this.index);
253+
if (distance < 0) {
254+
this.direction === 'v' ? this.onSwipeUp.call(this) : this.onSwipeLeft.call(this);
255+
256+
if (!lockNext) {
257+
//如果是长页面，需判断一下是否到底
258+
if (curPage[0].pageScrollHeight && pageScrollTop < curPage[0].pageScrollHeight) {
259+
return;
260+
} else if (distance < -20) {
261+
this.next();
262+
} else {
263+
this.moveTo(this.index);
264+
}
249265
}
250266
}
251267
},
@@ -280,6 +296,7 @@
280296
clearTimeout(this.timer);
281297
this.timer = setTimeout(function () {
282298
self._currentClass(index);
299+
self.prevIndex = self.index;
283300
self.index = index;
284301
self.onchange.call(self);
285302

@@ -336,7 +353,7 @@
336353

337354

338355
//当子元素高度超过页面时，需滚完再切换
339-
if(height > pageHeight){
356+
if (height > pageHeight) {
340357
$this.data('height', height);
341358
$this.css('overflow', 'auto');
342359
}

‎src/PageSlider.js

+35-22
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
*/
44
/**
55
* @author : littledu
6-
* @version : 0.2.1
7-
* @date : 2015-06-28
6+
* @version : 0.2.2
7+
* @date : 2015-07-08
88
* @repository: https://github.com/littledu/PageSlider
99
*/
1010

@@ -20,6 +20,10 @@
2020
preventDefault: true,
2121
animationPlayOnce: false,
2222
dev: false, //开发模式，传入数值，直接跳到正在开发的屏数
23+
onSwipeUp: function(){},
24+
onSwipeDown: function(){},
25+
onSwipeLeft: function(){},
26+
onSwipeRight: function(){},
2327
oninit: function () { //初始化完成时的回调
2428
},
2529
onbeforechange: function () { //开始切换前的回调
@@ -110,7 +114,10 @@
110114
this.lastVisitedIndex = this._getLastVisited();
111115
}
112116

113-
this.moveTo(this.index, true);
117+
//初始化时不再直接调用 moveTo, 免得初始化时还会回调一次 onchange 等接口 from 0.2.2
118+
//this.moveTo(this.index, true);
119+
this.target.css('-webkit-transform', 'translate3d(0, 0, 0)');
120+
this.pages.eq(0).addClass(this.currentClass);
114121

115122
this.oninit.call(this);
116123

@@ -223,29 +230,34 @@
223230
this._setTransition();
224231

225232
//swipeDown
226-
if (distance > 0 && !lockPrev) {
227-
228-
//如果是长页面，需判断一下是否到顶
229-
if (curPage[0].pageScrollHeight && pageScrollTop > pageHeight) {
230-
return;
231-
} else if (distance > 20) {
232-
this.prev();
233-
} else {
234-
this.moveTo(this.index);
233+
if(distance > 0){
234+
this.direction === 'v' ? this.onSwipeDown.call(this) : this.onSwipeRight.call(this);
235+
236+
if(!lockPrev){
237+
//如果是长页面，需判断一下是否到顶
238+
if (curPage[0].pageScrollHeight && pageScrollTop > pageHeight) {
239+
return;
240+
} else if (distance > 20) {
241+
this.prev();
242+
} else {
243+
this.moveTo(this.index);
244+
}
235245
}
236-
237246
}
238247

239248
//swipeUp
240-
if (distance < 0 && !lockNext) {
241-
242-
//如果是长页面，需判断一下是否到底
243-
if (curPage[0].pageScrollHeight && pageScrollTop < curPage[0].pageScrollHeight) {
244-
return;
245-
} else if (distance < -20) {
246-
this.next();
247-
} else {
248-
this.moveTo(this.index);
249+
if(distance < 0){
250+
this.direction === 'v' ? this.onSwipeUp.call(this) : this.onSwipeLeft.call(this);
251+
252+
if(!lockNext){
253+
//如果是长页面，需判断一下是否到底
254+
if (curPage[0].pageScrollHeight && pageScrollTop < curPage[0].pageScrollHeight) {
255+
return;
256+
} else if (distance < -20) {
257+
this.next();
258+
} else {
259+
this.moveTo(this.index);
260+
}
249261
}
250262
}
251263
},
@@ -280,6 +292,7 @@
280292
clearTimeout(this.timer);
281293
this.timer = setTimeout(function () {
282294
self._currentClass(index);
295+
self.prevIndex = self.index;
283296
self.index = index;
284297
self.onchange.call(self);
285298

0 commit comments

Comments
 (0)