这篇文章将为大家详细讲解有关Ionic2中如何创建App启动页滑动欢迎界面,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
东阿网站制作公司哪家好,找创新互联建站!从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作,到程序开发,运营维护。创新互联建站成立于2013年到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。
效果如下,图片来自网络
下面例子和上图稍有不同,主要功能如下:
每滑动一下展示一张全屏图片;
滑动到最后一页才出现启动按钮;
欢迎界面只在第一次安装启动时出现。
下面就让我们一步一步实现这个功能:
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启动页滑动欢迎界面就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。