每日一博 | 用 Ionic2 创建 App 启动页滑动欢迎界面

本文主要是介绍每日一博 | 用 Ionic2 创建 App 启动页滑动欢迎界面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原文 https://my.oschina.net/qinphil/blog/777787

效果如下，图片来自网络

本文例子和上图稍有不同，主要功能如下：

每滑动一下展示一张全屏图片；
滑动到最后一页才出现启动按钮；
欢迎界面只在第一次安装启动时出现。

下面就让我们一步一步实现这个功能：

1.创建应用：

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

ionic start ionic2-welcome --v2

2.创建Component

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

ionic g page welcome

然后打开应用跟组件app.component.ts,导入组件,app.module.ts也一样并配置

import { WelcomePage } from '../pages/welcome/welcome';

3.创建模板文件welcome.html

<ion-slides pager><ion-slide><img src="images/slide1.png" /> </ion-slide> <ion-slide> <img src="images/slide2.png" /> </ion-slide> <ion-slide> <img src="images/slide3.png" /> </ion-slide> <ion-slide> <ion-row> <ion-col> <img src="images/slide4.png" /> </ion-col> </ion-row> <ion-row> <ion-col> <button light (click)="goToHome()">立即启动</button> </ion-col> </ion-row> </ion-slide> </ion-slides>

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

4.创建welcome.scss

ion-slide {background-color: #eeeeee;
}ion-slide img { height: 70vh !important; width: auto !important; }

5.创建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.在根组件导入welcome组件，编辑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>`, }) 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 is ready and our plugins are available. // Here you can do any higher level native things you might need. StatusBar.styleDefault(); }); } }