ionic2 左右滑动引导页

1.创建应用：

使用Ionic2创建应用非常简单，只需在V1的命令后跟上--v2即可，如下：

1 ionic start ionic2-welcome --v2

启动流浏览器,查看当前效果

1 ionic serve

2.创建Component

使用命令行创建页面或者自行在创建文件

1 ionic g page welcome

然后打开应用跟组件app.component.ts,导入组件,app.module.ts也一样并配置
1 import { WelcomePage } from '../pages/welcome/welcome';

3.创建模板文件welcome.html

 1 <ion-slides pager>
 2 <ion-slide>
 3 <img src="images/slide1.png" />
 4 </ion-slide>
 5 <ion-slide>
 6 <img src="images/slide2.png" />
 7 </ion-slide>
 8 <ion-slide>
 9 <img src="images/slide3.png" />
10 </ion-slide>
11 <ion-slide>
12 <ion-row>
13 <ion-col>
14 <img src="images/slide4.png" />
15 </ion-col>
16 </ion-row>
17 <ion-row>
18 <ion-col>
19 <button light (click)="goToHome()">立即启动</button>
20 </ion-col>
21 </ion-row>
22 </ion-slide>
23 </ion-slides>

通过ionic自带的ion-slides可以很方便的创建一个欢迎页面

4.创建welcome.scss

1 ion-slide {
2  
3 }
4 ion-slide img {
5 height: 70vh !important;
6 width: auto !important;
7 }

5.创建welcome.ts

 1 import { Component } from '@angular/core';
 2 import {NavController} from 'ionic-angular';
 3 import {HomePage} from '../home/home';
 4 @Component({
 5 templateUrl: 'welcome.html'
 6 })
 7 export class WelcomePage {
 8 constructor(public navCtr: NavController){
 9 }
10 goToHome(){
11 this.navCtr.setRoot(HomePage);
12 }
13 }

6.在根组件导入welcome组件，编辑app.moudle.ts

 1 import { Component } from '@angular/core';
 2 import { Platform } from 'ionic-angular';
 3 import { StatusBar } from 'ionic-native';
 4 import { HomePage } from '../pages/home/home';
 5 import { WelcomePage } from '../pages/welcome/welcome';
 6 import { Storage } from '@ionic/storage';
 7 @Component({
 8 template: `<ion-nav [root]="rootPage"></ion-nav>`,
 9 })
10 export class MyApp {
11 rootPage: any;
12 constructor(platform: Platform, public storage: Storage) {
13 this.storage.get('firstIn').then((result) => {
14 if(result){
15 this.rootPage = HomePage;
16 }
17 else{
18 this.storage.set('firstIn', true);
19 this.rootPage = WelcomePage;
20 }
21 }
22 );
23 platform.ready().then(() => {
24 // Okay, so the platform is ready and our plugins are available.
25 // Here you can do any higher level native things you might need.
26 StatusBar.styleDefault();
27 });
28 }
29 }

这里判断是否是第一次开启app采用的是native的storage组件，第一次启动会写入storage一个变量firstIn,下次启动时如果读取到这个变量则直接跳过欢迎页，注意ionic2开始storage默认使用的是IndexedDB，而不是LocalStorage

这一篇是我网上找到的，因为希望方便我自己查看所以记录在博客。

posted @ 2017-12-20 23:45  Tiramisu.man  阅读(856)  评论(0)  编辑  收藏  举报