Ionic2中如何创建App启动页滑动欢迎界面

这篇文章将为大家详细讲解有关Ionic2中如何创建App启动页滑动欢迎界面，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

效果如下，图片来自网络

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

• 每滑动一下展示一张全屏图片；

• 滑动到最后一页才出现启动按钮；

• 欢迎界面只在第一次安装启动时出现。

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

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

                                                                                          立即启动               

通过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: ``,   })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();     });  } }

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

关于Ionic2中如何创建App启动页滑动欢迎界面就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。