A Daily Blog | Create APP launch page with Ionic2 swipe Welcome screen

Original https://my.oschina.net/qinphil/blog/777787

The effect is as follows, the image from the network

Examples of this article are slightly different and the main functions are as follows:

• Each slide to show a full screen picture;
• Swipe to the last page before the Start button appears;
• The welcome interface appears only when the first installation starts.

Let's do this one step at a pace:

1. Create an app:

Creating an app with Ionic2 is simple, just keep up with--v2 after the V1 command, as follows:

--v2

2. Create component

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

Ionic G Page Welcome

Then open the app with component App.component.ts, import components, app.module.ts and configure

‘.. /pages/welcome/welcome ';

3. Create a template file welcome.html

<Ion-slidesPager><Ion-slide><ImgSrc="Images/slide1.png"/></Ion-slide><Ion-slide><ImgSrc="Images/slide2.png"/></Ion-slide><Ion-slide><ImgSrc="Images/slide3.png"/></Ion-slide><Ion-slide><Ion-row><Ion-col><Imgsrc= "images/slide4.png"/> </< Span class= "Hljs-name" >ion-col> </ion-row> <ion-row> <ion-col > <button light ( click) = "Gotohome ()" > Immediately start </button> </ion-col> </ion-row> </ ion-slide> </ION-SLIDES>   

A welcome page can be easily created by Ionic's own ion-slides.

4. Create Welcome.scss

ion-slide {    img {    !important;} 

5. Create Welcome.ts

' @angular/core '; '   ionic-angular ';' Welcome.html '})This.navCtr.setRoot (homepage);}}  

6. Import the Welcome component in the root component, edit the App.moudle.ts

Import {Component}From' @angular/core ';Import {Platform}From' Ionic-angular ';Import {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> ',}]ExportClassMyApp {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 was ready and we plugins are available. //Here you can does any higher level native things you might need. Statusbar.styledefault (); }); } }

Here to determine whether it is the first time to open the app using the native storage component, the first boot will write storage a variable firstin, the next time you start reading this variable will skip the Welcome page directly, Note that Ionic2 starts storage by default with INDEXEDDB instead of Localstorage

A Daily Blog | Create APP launch page with Ionic2 swipe Welcome screen