Skip to content

Commit 1aa9e68

Browse files
littledulittledu
littledu
authored and
littledu
committed
push example
1 parent bd4f0a3 commit 1aa9e68

19 files changed

+1621
-360
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.DS_Store
2+
.idea

‎README.md

+108-34
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,46 @@
1-
# PageSide -- 移动端切屏组件
1+
# PageSide -- 移动端滑屏组件
22

3-
`PageSlide` 是一个用于移动端屏切的工具，支持竖切，横切，预加载等功能，同时支持 AMD 模块化加载方式
3+
`PageSlide` 是一个用于移动端滑屏组件，支持上下滑动，左右滑动，禁止滑动等功能，同时支持 AMD 模块化加载方式
44

55
## 使用方法
66

77
**HTML：**
88
```html
9-
<div class="wrap">
10-
<section class="screen screen1">screen1</section>
11-
<section class="screen screen2">screen2</section>
12-
<section class="screen screen3">screen3</section>
13-
<section class="screen screen4">screen4</section>
14-
<section class="screen screen5">screen5</section>
9+
<div class="page-wrap">
10+
<div class="page">
11+
<div class="title">page one</div>
12+
<div class="subtitle">page one subtitle</div>
13+
<div class="arrow"></div>
14+
</div>
15+
16+
<div class="page">
17+
<div class="title">page two</div>
18+
<div class="subtitle">page two subtitle</div>
19+
<div class="arrow"></div>
20+
</div>
21+
<div class="page">
22+
<div class="title">page three</div>
23+
<div class="subtitle">page three subtitle</div>
24+
<div class="arrow"></div>
25+
</div>
26+
<div class="page">
27+
<div class="title">page four</div>
28+
<div class="subtitle">page four subtitle</div>
29+
</div>
1530
</div>
1631
```
1732

1833
**CSS**
1934
```css
20-
html, body, .wrap{
35+
html, body, .page-wrap {
2136
width: 100%;
2237
height: 100%;
2338
overflow: hidden;
2439
}
25-
.screen{
40+
41+
.page {
2642
width: 100%;
2743
height: 100%;
28-
overflow: hidden;
2944
-webkit-backface-visibility: hidden;
3045
-webkit-perspective: 1000;
3146
}
@@ -35,53 +50,112 @@ html, body, .wrap{
3550
**JavaScript**
3651
```javascript
3752
new PageSlide({
38-
pages: document.querySelectorAll('.screen')
53+
pages: $('.page-wrap .page')
3954
});
4055
```
4156

4257
## 参数
4358

4459
```javascript
4560
new PageSlide({
46-
pages: document.querySelectorAll('.screen'), //必需，需要切换的所有屏
47-
swipe: 'Y', //可选，控制切换方向['X', 'Y']，默认值为 'Y'
48-
toggleClass: 'current', //可选, 当前屏的class (方便实现内容的进场动画)，默认值为 'current'
49-
animateFn: 'ease-in-out', //可选，屏切动画，可选值为 ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out']，默认值为 'ease-in-out'
50-
speed: 500, //可选，屏切速度，建议值范围为[100-1000]，默认值为 500
51-
control: false, //可选，动态生成屏标识，默认为 false
52-
controlClass: 'page-control', //可选，依赖于 control 属性，方便用户设置标识样式，默认值为 'page-control'
53-
preLoad: false //可选，图片预加载，切换到当前屏时，预先加载下一屏的图片，默认为 false
61+
pages: $('.page-wrap .page'), //必需，需要切换的所有屏
62+
direction: 'v', //可选，vertical 或 v 为上下滑动，horizontal 或 h 为左右滑动，默认为 v
63+
currentClass: 'current', //可选, 当前屏的class (方便实现内容的进场动画)，默认值为 'current'
64+
gestureFollowing: 'false', //可选，如果为 true，则开启手势跟随模式
65+
hasDot: 'false', //可选，生成标识点结构，样式自己控制
66+
preventDefault: true, //可选，是否阻止默认行为
67+
rememberLastVisited: true, //可选，记住上一次访问结束后的索引值，可用于实现页面返回后是否回到上次访问的页面
68+
dev: false, //可选，开发模式，传入具体页面索引值
69+
oninit: function () {}, //可选，初始化完成时的回调
70+
onchange: function () {} //可选，每一屏切换完成时的回调
5471
});
5572
```
5673

5774
## 接口
5875

5976
- `prev()` 上一屏
6077
- `next()` 下一屏
61-
- `run(n)` 跳转到第 n 屏
78+
- `moveTo(n)` 跳转到第 n 屏，有缓动效果
79+
- `moveTo(n, true)` 直接跳到第 n 屏，没有缓动效果
6280

63-
## 示例
81+
## 功能点
6482

65-
![Alt text](https://raw.githubusercontent.com/littledu/littledu.github.io/master/demo/pageSlide/cli.jpg)
83+
### 1. 支持 dom 绑定动画
84+
85+
通常，页面上的元素动画都是通过样式来控制，如下：
86+
```css
87+
.current .dom{
88+
-webkit-animation: slideToTop 1s 0.5s ease both;
89+
}
90+
```
6691

67-
或 点击 http://littledu_test.jd-app.com/pageSlide/
92+
pageSlide 支持将动画直接绑定在具体 dom 元素上，如下：
93+
```html
94+
<div class="title" data-animation='{"name": "slideToTop", "duration": 800, "timing-function": "ease", "fill-mode": "both"}'>
95+
page two
96+
</div>
97+
<div class="subtitle" data-animation='{"name": "slideToTop", "duration": 800, "delay": 300, "timing-function": "ease", "fill-mode": "both"}'>
98+
page two subtitle
99+
</div>
100+
```
68101

102+
### 2. 手势跟随
69103

70-
### 预加载功能介绍
104+
pageSlide 最初的滑动较简单，直接判断手势进行翻屏，而有朋友喜欢在 touchmove 时能拉动页面，看到下一屏，此为朋友说的 `手势跟随`。其也 因为没有此功能而放弃使用 pageSlide，故新版做了支持，只需要如右设置即可： `gestureFollowing: true`。
71105

72-
经常的，在微信朋友圈打开某些屏切页面，总需要等很久，因为其可能做了很酷弦的效果，用了不少图片，为了让效果体验更流畅，所以有些会加一个 loading 效果，等页面完全加载完了再显示出来。但也是依然要等。所以，PageSlide 想在需要的时候再加载这些图片，一来可以提高页面加载速度，二来用户没看完也没必要加载后面的图片。故有此功能。
106+
### 3. 锁定禁止滑动
73107

74-
**使用方法：**
108+
随着业务的发展，有时候需要锁定当前屏，不响应用户的滑动事件，需要点击某按钮或完成某些操作后再自动滑屏。本次更新提供了以下方法进行锁定：
75109

76-
1. 用 `textarea` 将内容装起来，如：
77110
```html
78-
<div class="wrap">
79-
<section class="screen srceen1">screen1</section>
80-
<section class="screen srceen2"><textarea style="display:none;">srceen2</textarea></section>
81-
<section class="screen srceen3"><textarea style="display:none;">>srceen3</textarea></section>
82-
</div>
111+
<div class="page" data-lock-next="true" data-lock-prev="true"></div>
112+
```
113+
114+
`data-lock-next`： 禁止往后滑
115+
`data-lock-prev`： 禁止往前滑
116+
117+
### 4. 记住页面索引
118+
119+
有时候，当页面跳走返回时，希望能直接返回到上次跳走的页面，而不希望重头再来，只需如右设置：`rememberLastVisited: true`，即会保存当前页面索引到 localstorage，当返回时即可方便操作，如下：
120+
121+
```javascript
122+
new PageSlide({
123+
pages: $('.page-wrap .page'),
124+
rememberLastVisited: true,
125+
oninit: function(){
126+
//返回时，需告诉我们此时为返回动作而不是刷新，可以通过 hash 告诉我们
127+
//PageSlide 所有回调接口 this 指向 PageSlide，方便进行操作
128+
if(返回为 true){
129+
this.moveTo(this.lastVisitedIndex, true);
130+
}
131+
}
132+
});
133+
```
134+
135+
### 5. dev 模式
136+
此为个人习惯，我在开发时，假设在写第二屏动画时，我会将第一屏隐藏掉，以方便每次刷新都直接在第二屏，而不需要去滑动。但当我在写第 5 屏动画时，我需要手动隐藏 n-1 屏。。。。然后此时领导过来说，XXX，来，让我看一下你做好的效果，然后我又要手动把之前隐藏的显示，十几秒后看完我继续开发又要继续隐藏。。。。。人生如此短暂，受不鸟呐。所以，只需要如下操作，即可愉快的开发：
137+
138+
139+
```javascript
140+
new PageSlide({
141+
pages: $('.page-wrap .page'),
142+
dev: 0 //0|1|2|3|...
143+
});
83144
```
84-
2. `preLoad` 参数设为 `true` 即可。
145+
146+
## TODO
147+
看后面需求是否有必要实现如下功能：
148+
149+
1. scale 的动画切换方式
150+
2. cover 的动画切换方式
151+
3. 支持内容超出一屏先滚完再翻页
152+
153+
## Releases
154+
155+
#### 0.2.0 基于 zepto 重写，去除 预加载 等功能。
156+
#### 0.1.0 实现基本功能。
157+
158+
85159

86160

87161

‎example/css/style.css

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
html, body {
7+
width: 100%;
8+
height: 100%;
9+
overflow: hidden;
10+
}
11+
12+
.page-wrap {
13+
width: 100%;
14+
height: 100%;
15+
overflow: hidden;
16+
}
17+
18+
.page {
19+
width: 100%;
20+
height: 100%;
21+
-webkit-backface-visibility: hidden;
22+
-webkit-perspective: 1000;
23+
}
24+
25+
.page:first-child {
26+
background-color: #7B68EE;
27+
}
28+
29+
.page:nth-child(2) {
30+
background-color: #00BFFF;
31+
}
32+
33+
.page:nth-child(3) {
34+
background-color: #ff8c81;
35+
}
36+
37+
.page:last-child {
38+
background-color: #40E0D0;
39+
}
40+
41+
.title {
42+
width: 100%;
43+
text-align: center;
44+
padding-top: 40px;
45+
color: #000;
46+
font-size: 18px;
47+
opacity: 0;
48+
}
49+
50+
.subtitle {
51+
width: 100%;
52+
text-align: center;
53+
padding-top: 20px;
54+
color: #000;
55+
font-size: 16px;
56+
opacity: 0;
57+
}
58+
59+
.arrow, {
60+
position: absolute;
61+
left: 50%;
62+
bottom: 10px;
63+
width: 33px;
64+
height: 18px;
65+
margin-left: -16px;
66+
background: url(../img/arrow.png) no-repeat;
67+
background-size: 33px auto;
68+
opacity: 0;
69+
}
70+
71+
.arrow-h{
72+
position: absolute;
73+
right: 10px;
74+
top: 50%;
75+
width: 33px;
76+
height: 18px;
77+
margin-top: -9px;
78+
opacity: 0;
79+
}
80+
81+
.arrow-h i{
82+
display: block;
83+
width: 33px;
84+
height: 18px;
85+
background: url(../img/arrow.png) no-repeat;
86+
background-size: 33px auto;
87+
-webkit-transform: rotate(-90deg);
88+
}
89+
90+
.current .arrow {
91+
-webkit-animation: swipeMove 1.5s 1s ease infinite;
92+
}
93+
94+
.current .arrow-h {
95+
-webkit-animation: swipeMoveLeft 1.5s 1s ease infinite;
96+
}
97+
98+
/*上滑提示*/
99+
@-webkit-keyframes swipeMoveTop {
100+
0% {
101+
opacity: 0;
102+
-webkit-transform: translate3d(0, 10px, 0);
103+
}
104+
70% {
105+
opacity: 1;
106+
-webkit-transform: translate3d(0, 0, 0);
107+
}
108+
100% {
109+
opacity: 0;
110+
-webkit-transform: translate3d(0, -10px, 0);
111+
}
112+
}
113+
114+
/*左滑提示*/
115+
@-webkit-keyframes swipeMoveLeft {
116+
0% {
117+
opacity: 0;
118+
-webkit-transform: translate3d(10px, 0, 0);
119+
}
120+
70% {
121+
opacity: 1;
122+
-webkit-transform: translate3d(0, 0, 0);
123+
}
124+
100% {
125+
opacity: 0;
126+
-webkit-transform: translate3d(-10px, 0, 0);
127+
}
128+
}
129+
130+
@-webkit-keyframes slideToTop {
131+
0% {
132+
opacity: 0;
133+
-webkit-transform: translate3d(0, 100px, 0);
134+
}
135+
100% {
136+
opacity: 1;
137+
-webkit-transform: translate3d(0, 0, 0);
138+
}
139+
}

‎example/html/data-animation.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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>data-animation</title>
10+
<link rel="stylesheet" href="../css/style.css"/>
11+
</head>
12+
<body>
13+
<div class="page-wrap">
14+
<div class="page">
15+
<div class="title" data-animation='{"name": "slideToTop", "duration": 800, "timing-function": "ease", "fill-mode": "both"}'>page one</div>
16+
<div class="subtitle" data-animation='{"name": "slideToTop", "duration": 800, "delay": 300, "timing-function": "ease", "fill-mode": "both"}'>page one subtitle</div>
17+
18+
<div class="arrow"></div>
19+
</div>
20+
21+
<div class="page">
22+
<div class="title" data-animation='{"name": "slideToTop", "duration": 800, "timing-function": "ease", "fill-mode": "both"}'>page two</div>
23+
<div class="subtitle" data-animation='{"name": "slideToTop", "duration": 800, "delay": 300, "timing-function": "ease", "fill-mode": "both"}'>page two subtitle</div>
24+
25+
<div class="arrow"></div>
26+
</div>
27+
<div class="page">
28+
<div class="title" data-animation='{"name": "slideToTop", "duration": 800, "timing-function": "ease", "fill-mode": "both"}'>page three</div>
29+
<div class="subtitle" data-animation='{"name": "slideToTop", "duration": 800, "delay": 300, "timing-function": "ease", "fill-mode": "both"}'>page three subtitle</div>
30+
31+
<div class="arrow"></div>
32+
</div>
33+
<div class="page">
34+
<div class="title" data-animation='{"name": "slideToTop", "duration": 800, "timing-function": "ease", "fill-mode": "both"}'>page four</div>
35+
<div class="subtitle" data-animation='{"name": "slideToTop", "duration": 800, "delay": 300, "timing-function": "ease", "fill-mode": "both"}'>page four subtitle</div>
36+
</div>
37+
</div>
38+
39+
<script src="../js/zepto_modify.js"></script>
40+
<script src="../js/pageSlide.js"></script>
41+
<script>
42+
new PageSlide({
43+
pages: $('.page-wrap .page')
44+
});
45+
46+
</script>
47+
</body>
48+
</html>

0 commit comments

Comments
 (0)