Ionic2:创建App启动页滑动欢迎界面
2017-10-19 18:28
330 查看
摘要:
每个有逼格的App在第一次启动时都有一个欢迎界面,通常是几个单页面或者带动画的单页面滑动到最后一页有个启动的按钮,本文将使用Ionic2来创建,So easy!
本文例子和上图稍有不同,主要功能如下:
每滑动一下展示一张全屏图片;
滑动到最后一页才出现启动按钮;
欢迎界面只在第一次安装启动时出现。
下面就让我们一步一步实现这个功能:
1.创建应用:
使用Ionic2创建应用非常简单,只需在V1的命令后跟上--v2即可,如下:
2.创建Component
使用命令行创建页面或者自行在创建文件
然后打开应用跟组件app.component.ts,导入组件,app.module.ts也一样并配置
3.创建模板文件welcome.html
通过ionic自带的ion-slides可以很方便的创建一个欢迎页面
4.创建welcome.scss
5.创建welcome.ts
6.在根组件导入welcome组件,编辑app.moudle.ts
这里判断是否是第一次开启app采用的是native的storage组件,第一次启动会写入storage一个变量firstIn,下次启动时如果读取到这个变量则直接跳过欢迎页,注意ionic2开始storage默认使用的是IndexedDB,而不是LocalStorage
每个有逼格的App在第一次启动时都有一个欢迎界面,通常是几个单页面或者带动画的单页面滑动到最后一页有个启动的按钮,本文将使用Ionic2来创建,So easy!
本文例子和上图稍有不同,主要功能如下:
每滑动一下展示一张全屏图片;
滑动到最后一页才出现启动按钮;
欢迎界面只在第一次安装启动时出现。
下面就让我们一步一步实现这个功能:
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();
});
}
}
这里判断是否是第一次开启app采用的是native的storage组件,第一次启动会写入storage一个变量firstIn,下次启动时如果读取到这个变量则直接跳过欢迎页,注意ionic2开始storage默认使用的是IndexedDB,而不是LocalStorage
相关文章推荐
- Ionic2:创建App启动页滑动欢迎界面
- Ionic2:创建App启动页滑动欢迎界面
- Ionic2:创建App启动页滑动欢迎界面
- Ionic2创建App启动页左右滑动欢迎界面
- 利用 ViewPager 等,实现带小圆球的图片滑动,并且只有第一次安装app时才出现欢迎界面(图片)
- Android欢迎界面的创建及引导完整代码(判断是否是第一次下载注册)
- 模拟新闻APP显示界面滑动优化
- ViewPager实现页面切换 (包含App第一次登录时候的欢迎界面的展示)
- 【安卓】安卓App开发思路 一步一个脚印(一)欢迎界面
- Android 端天气预报APP的实现(一)天气显示界面之上下滑动
- 安卓判断是否首次进入app,通过判断跳转欢迎引导界面和主界面
- APP开启欢迎界面后自动跳转到主界面解决方法
- 你所不知道的Andorid启动页(欢迎界面)
- APP首次打开的欢迎界面
- 【cocos2dx-3.0beta-制作flappybird】玄关是必要的—游戏欢迎界面的创建
- django简单实现项目和app的创建,并通过admin管理界面管理
- OpenCV之highgui 模块. 高层GUI和媒体I/O: 为程序界面添加滑动条 OpenCV的视频输入和相似度测量 用OpenCV创建视频
- 如何在windows8 metro app中创建list界面
- App欢迎界面的制作(UIScrollView实现)
- 一个app启动页滑动翻页介绍的demo