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

2024-02-12 04:30

本文主要是介绍每日一博 | 用 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
<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

转载于:https://www.cnblogs.com/wfblogs/p/6237036.html

这篇关于每日一博 | 用 Ionic2 创建 App 启动页滑动欢迎界面的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/weixin_33894640/article/details/93144089
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/701665

相关文章

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

创建Java keystore文件的完整指南及详细步骤

《创建Javakeystore文件的完整指南及详细步骤》本文详解Java中keystore的创建与配置,涵盖私钥管理、自签名与CA证书生成、SSL/TLS应用,强调安全存储及验证机制,确保通信加密和... 目录1. 秘密键(私钥)的理解与管理私钥的定义与重要性私钥的管理策略私钥的生成与存储2. 证书的创建与

python如何创建等差数列

《python如何创建等差数列》:本文主要介绍python如何创建等差数列的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python创建等差数列例题运行代码回车输出结果总结python创建等差数列import numpy as np x=int(in

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备(JDK1.8+、Maven3.2.5+)、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA,点击New新建一个项

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

MySQL 用户创建与授权最佳实践

《MySQL用户创建与授权最佳实践》在MySQL中,用户管理和权限控制是数据库安全的重要组成部分,下面详细介绍如何在MySQL中创建用户并授予适当的权限,感兴趣的朋友跟随小编一起看看吧... 目录mysql 用户创建与授权详解一、MySQL用户管理基础1. 用户账户组成2. 查看现有用户二、创建用户1. 基

nginx启动命令和默认配置文件的使用

《nginx启动命令和默认配置文件的使用》:本文主要介绍nginx启动命令和默认配置文件的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录常见命令nginx.conf配置文件location匹配规则图片服务器总结常见命令# 默认配置文件启动./nginx

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,:本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点:二、安装uv1. 通过pip安装2. 通过脚本安装验证安装:配置镜像源(可