IONIC2 Create app startup page Sliding Welcome interface _android

Summary:

Every cornered app has a welcome interface for the first boot, usually a few single pages or a single page that drives the drawing to the last page with a button to start, this article will use Ionic2 to create, so easy!

The effect is as follows

The examples in this article are slightly different from the above, and the main functions are as follows:

Each slide shows a full screen picture;

Slide to the last page before the Start button appears;

The welcome interface appears only when the first installation starts.

Let's do this step-by-step:

1. Create Application:

Using Ionic2 to create an application is very simple, just follow the V1 command after--v2, as follows:

Ionic start Ionic2-welcome--v2

2. Create component

Create a page by using the command line or create a file yourself

Ionic G Page Welcome

Then open the application to the component App.component.ts, import the components, and app.module.ts the same and configure

Import {welcomepage} from ' ... /pages/welcome/welcome ';

3. Create template file welcome.html

<ion-slides pager>
<ion-slide>

</ion-slide>
<ion-slide>

</ion-slide>
<ion-slide>

</ion-slide>
<ion-slide>
<ion-row>
<ion-col>

</ion-col>
</ion-row>
<ion-row>
<ion-col>
<button Light (click) = "Gotohome ()" > Immediate start </button>
</ion-col>
</ion-row>
</ion-slide>
</ion-slides>

It's easy to create a welcome page with the Ion-slides from Ionic.

4. Create Welcome.scss

ion-slide {
background-color: #eeeeee;
}
Ion-slide img {
HEIGHT:70VH!important;
Width:auto!important;
}

5. Create Welcome.ts

Import {Component} from ' @angular/core ';
Import {Navcontroller} from ' Ionic-angular ';
Import {homepage} from ' ... /home/home '; 
@Component ({
templateurl: ' welcome.html '
})
Export class Welcomepage {
constructor (public navctr: Navcontroller) { 
}
gotohome () {
this.navCtr.setRoot (homepage);
}
}

6. Import welcome components in the root component, edit app.moudle.ts

 import {Component} from ' @angular/core '; import {Platform} from ' Ionic-angular '; imp
ORT {StatusBar} from ' ionic-native '; Import {homepage} from ' ...
/pages/home/home '; Import {welcomepage} from ' ...
/pages/welcome/welcome ';
Import {Storage} from ' @ionic/storage '; 
@Component ({Template: ' <ion-nav [root]= ' rootpage ' ></ion-nav> ',}) export class MyApp {rootpage:any; Constructor (Platform:platform, public storage:storage) {this.storage.get (' Firstin '). Then (result) => {if (result) 
{this.rootpage = homepage;
} else{this.storage.set (' Firstin ', true); this.rootpage = Welcomepage;}} 
); Platform.ready (). Then (() => {//Okay, so the platform are ready and our plugins are
Igher level native things for you might need. 
Statusbar.styledefault ();
}); } 
}

Here to determine whether the first time to open the app is the native storage component, the first boot will be written to storage a variable firstin, the next time you start to read this variable will skip the Welcome page, Note that IONIC2 begins storage by default using INDEXEDDB instead of Localstorage

The above is a small set to introduce the IONIC2 to create app launch page around the Welcome interface, hope to help everyone, if you have any questions welcome to my message, small series will promptly reply to everyone!