Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitde410bf

Browse files
committed
ion-slides 实现垂直滑动效果
1 parent384a05d commitde410bf

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+11931
-2
lines changed

‎SUMMARY.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@
55
*[Ionic 开发环境搭建](docs/ide.md)
66
*[第一个Ionic应用](docs/hello-world.md)
77
*[ion-slides 实现水平滑动效果](docs/ion-slides.md)
8+
*[ion-slides 实现垂直滑动效果](docs/ion-slides-vertical.md)
89
* To be continued ...未完待续...

‎docs/ion-slides-vertical.md‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
#ion-slides 实现垂直滑动效果
2+
3+
ion-slides 实现滑动主要基于[Swiper](http://idangero.us/swiper)来实现滑动效果。
4+
5+
本节将演示，如何来实现垂直滑动的效果。
6+
7+
##初始化应用
8+
9+
创建一个blank的名为ion-slides-vertical应用：
10+
11+
```
12+
$ ionic start ion-slides-vertical blank
13+
```
14+
15+
16+
启动应用：
17+
18+
19+
```
20+
$ cd ion-slides-vertical
21+
$ ionic serve
22+
```
23+
24+
![](../images/ion-slides-vertical/1-start.jpg)
25+
26+
27+
##修改模版
28+
29+
修改模版代碼如下：
30+
31+
```
32+
<ion-slides [options]="slideOpts">
33+
<ion-slide>
34+
<div class="box pink">
35+
<h1>pink</h1>
36+
</div>
37+
</ion-slide>
38+
<ion-slide>
39+
<div class="box yellow">
40+
<h1>yellow</h1>
41+
</div>
42+
</ion-slide>
43+
<ion-slide>
44+
<div class="box blue">
45+
<h1>blue</h1>
46+
</div>
47+
</ion-slide>
48+
</ion-slides>
49+
```
50+
51+
52+
这里用到了Ionic 的ion-slides 和 ion-slide组件。
53+
其中，slideOpts用到了组件里面的参数对象。
54+
55+
56+
##修改组件
57+
58+
59+
修改组件代碼如下：
60+
61+
```ts
62+
import {Component }from'@angular/core';
63+
64+
@Component({
65+
selector:'app-home',
66+
templateUrl:'home.page.html',
67+
styleUrls: ['home.page.scss'],
68+
})
69+
exportclassHomePage {
70+
// slide选项
71+
slideOpts= {
72+
effect:'flip',//滑动效果
73+
direction:'vertical'//方向
74+
};
75+
constructor() { }
76+
}
77+
```
78+
79+
80+
effect定义了滑动效果。effect可以设置的值为slide、fade、cube、coverflow 和 flip 。默认值是slide。
81+
82+
direction定义了滑动的方向，可以设置的值有vertical和horizontal。默认值是horizontal。
83+
84+
85+
上述选项，具体可以参考[Swiper API](http://idangero.us/swiper/api/)。
86+
87+
##修改样式
88+
89+
修改样式如下：
90+
91+
92+
```scss
93+
.blue {
94+
background-color:blue;
95+
}
96+
97+
.yellow {
98+
background-color:yellow;
99+
}
100+
101+
.pink {
102+
background-color:pink;
103+
}
104+
105+
.box {
106+
height:100%;
107+
width:100%;
108+
}
109+
110+
ion-slides {
111+
height:100%;
112+
margin:0000;
113+
}
114+
```
115+
116+
##运行应用
117+
118+
运行应用，水平滑动效果如下：
119+
120+
121+
122+
![](../images/ion-slides-vertical/2-pink.jpg)
123+
124+
125+
![](../images/ion-slides-vertical/3-yellow.jpg)
126+
127+
![](../images/ion-slides-vertical/4-blue.jpg)

‎docs/ion-slides.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ ion-slides 实现滑动主要基于[Swiper](http://idangero.us/swiper)来实现
66

77
##初始化应用
88

9-
创建ion-slides应用：
9+
创建创建一个blank的名为ion-slides应用：
1010

1111
```
12-
$ ionic start ion-slides
12+
$ ionic start ion-slides blank
1313
```
1414

1515

18.7 KB
Loading
13.2 KB
Loading
12.9 KB
Loading
14.1 KB
Loading
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Specifies intentionally untracked files to ignore when using Git
2+
# http://git-scm.com/docs/gitignore
3+
4+
*~
5+
*.sw[mnpcod]
6+
*.log
7+
*.tmp
8+
*.tmp.*
9+
log.txt
10+
*.sublime-project
11+
*.sublime-workspace
12+
.vscode/
13+
npm-debug.log*
14+
15+
.idea/
16+
.ionic/
17+
.sourcemaps/
18+
.sass-cache/
19+
.tmp/
20+
.versions/
21+
coverage/
22+
www/
23+
node_modules/
24+
tmp/
25+
temp/
26+
platforms/
27+
plugins/
28+
plugins/android.json
29+
plugins/ios.json
30+
$RECYCLE.BIN/
31+
32+
.DS_Store
33+
Thumbs.db
34+
UserInterfaceState.xcuserstate
Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
{
2+
"$schema":"./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
3+
"version":1,
4+
"defaultProject":"app",
5+
"newProjectRoot":"projects",
6+
"projects": {
7+
"app": {
8+
"root":"",
9+
"sourceRoot":"src",
10+
"projectType":"application",
11+
"prefix":"app",
12+
"schematics": {},
13+
"architect": {
14+
"build": {
15+
"builder":"@angular-devkit/build-angular:browser",
16+
"options": {
17+
"outputPath":"www",
18+
"index":"src/index.html",
19+
"main":"src/main.ts",
20+
"polyfills":"src/polyfills.ts",
21+
"tsConfig":"src/tsconfig.app.json",
22+
"assets": [
23+
{
24+
"glob":"**/*",
25+
"input":"src/assets",
26+
"output":"assets"
27+
},
28+
{
29+
"glob":"**/*.svg",
30+
"input":"node_modules/ionicons/dist/ionicons/svg",
31+
"output":"./svg"
32+
}
33+
],
34+
"styles": [
35+
{
36+
"input":"src/theme/variables.scss"
37+
},
38+
{
39+
"input":"src/global.scss"
40+
}
41+
],
42+
"scripts": []
43+
},
44+
"configurations": {
45+
"production": {
46+
"fileReplacements": [
47+
{
48+
"replace":"src/environments/environment.ts",
49+
"with":"src/environments/environment.prod.ts"
50+
}
51+
],
52+
"optimization":true,
53+
"outputHashing":"all",
54+
"sourceMap":false,
55+
"extractCss":true,
56+
"namedChunks":false,
57+
"aot":true,
58+
"extractLicenses":true,
59+
"vendorChunk":false,
60+
"buildOptimizer":true,
61+
"budgets": [
62+
{
63+
"type":"initial",
64+
"maximumWarning":"2mb",
65+
"maximumError":"5mb"
66+
}
67+
]
68+
},
69+
"ci": {
70+
"progress":false
71+
}
72+
}
73+
},
74+
"serve": {
75+
"builder":"@angular-devkit/build-angular:dev-server",
76+
"options": {
77+
"browserTarget":"app:build"
78+
},
79+
"configurations": {
80+
"production": {
81+
"browserTarget":"app:build:production"
82+
},
83+
"ci": {
84+
"progress":false
85+
}
86+
}
87+
},
88+
"extract-i18n": {
89+
"builder":"@angular-devkit/build-angular:extract-i18n",
90+
"options": {
91+
"browserTarget":"app:build"
92+
}
93+
},
94+
"test": {
95+
"builder":"@angular-devkit/build-angular:karma",
96+
"options": {
97+
"main":"src/test.ts",
98+
"polyfills":"src/polyfills.ts",
99+
"tsConfig":"src/tsconfig.spec.json",
100+
"karmaConfig":"src/karma.conf.js",
101+
"styles": [],
102+
"scripts": [],
103+
"assets": [
104+
{
105+
"glob":"favicon.ico",
106+
"input":"src/",
107+
"output":"/"
108+
},
109+
{
110+
"glob":"**/*",
111+
"input":"src/assets",
112+
"output":"/assets"
113+
}
114+
]
115+
},
116+
"configurations": {
117+
"ci": {
118+
"progress":false,
119+
"watch":false
120+
}
121+
}
122+
},
123+
"lint": {
124+
"builder":"@angular-devkit/build-angular:tslint",
125+
"options": {
126+
"tsConfig": ["src/tsconfig.app.json","src/tsconfig.spec.json"],
127+
"exclude": ["**/node_modules/**"]
128+
}
129+
},
130+
"ionic-cordova-build": {
131+
"builder":"@ionic/angular-toolkit:cordova-build",
132+
"options": {
133+
"browserTarget":"app:build"
134+
},
135+
"configurations": {
136+
"production": {
137+
"browserTarget":"app:build:production"
138+
}
139+
}
140+
},
141+
"ionic-cordova-serve": {
142+
"builder":"@ionic/angular-toolkit:cordova-serve",
143+
"options": {
144+
"cordovaBuildTarget":"app:ionic-cordova-build",
145+
"devServerTarget":"app:serve"
146+
},
147+
"configurations": {
148+
"production": {
149+
"cordovaBuildTarget":"app:ionic-cordova-build:production",
150+
"devServerTarget":"app:serve:production"
151+
}
152+
}
153+
}
154+
}
155+
},
156+
"app-e2e": {
157+
"root":"e2e/",
158+
"projectType":"application",
159+
"architect": {
160+
"e2e": {
161+
"builder":"@angular-devkit/build-angular:protractor",
162+
"options": {
163+
"protractorConfig":"e2e/protractor.conf.js",
164+
"devServerTarget":"app:serve"
165+
},
166+
"configurations": {
167+
"ci": {
168+
"devServerTarget":"app:serve:ci"
169+
}
170+
}
171+
},
172+
"lint": {
173+
"builder":"@angular-devkit/build-angular:tslint",
174+
"options": {
175+
"tsConfig":"e2e/tsconfig.e2e.json",
176+
"exclude": ["**/node_modules/**"]
177+
}
178+
}
179+
}
180+
}
181+
},
182+
"cli": {
183+
"defaultCollection":"@ionic/angular-toolkit"
184+
},
185+
"schematics": {
186+
"@ionic/angular-toolkit:component": {
187+
"styleext":"scss"
188+
},
189+
"@ionic/angular-toolkit:page": {
190+
"styleext":"scss"
191+
}
192+
}
193+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp