关键词：
1.创建应用：
使用Ionic2创建应用非常简单，只需在V1的命令后跟上--v2即可，如下：
1 ionic start ionic2-welcome --v2
启动流浏览器,查看当前效果
2.创建Component
使用命令行创建页面或者自行在创建文件
然后打开应用跟组件app.component.ts,导入组件,app.module.ts也一样并配置
1 import { WelcomePage } from ‘../pages/welcome/welcome‘;
3.创建模板文件welcome.html
1 <ion-slides pager>
2 <ion-slide>
3 <img src="images/slide1.png" />
4 </ion-slide>
5 <ion-slide>
6 <img src="images/slide2.png" />
7 </ion-slide>
8 <ion-slide>
9 <img src="images/slide3.png" />
10 </ion-slide>
11 <ion-slide>
12 <ion-row>
13 <ion-col>
14 <img src="images/slide4.png" />
15 </ion-col>
16 </ion-row>
17 <ion-row>
18 <ion-col>
19 <button light (click)="goToHome()">立即启动</button>
20 </ion-col>
21 </ion-row>
22 </ion-slide>
23 </ion-slides>
通过ionic自带的ion-slides可以很方便的创建一个欢迎页面
4.创建welcome.scss
1 ion-slide {
2
3 }
4 ion-slide img {
5 height: 70vh !important;
6 width: auto !important;
7 }
5.创建welcome.ts
1 import { Component } from ‘@angular/core‘;
2 import {NavController} from ‘ionic-angular‘;
3 import {HomePage} from ‘../home/home‘;
4 @Component({
5 templateUrl: ‘welcome.html‘
6 })
7 export class WelcomePage {
8 constructor(public navCtr: NavController){
9 }
10 goToHome(){
11 this.navCtr.setRoot(HomePage);
12 }
13 }
6.在根组件导入welcome组件，编辑app.moudle.ts
1 import { Component } from ‘@angular/core‘;
2 import { Platform } from ‘ionic-angular‘;
3 import { StatusBar } from ‘ionic-native‘;
4 import { HomePage } from ‘../pages/home/home‘;
5 import { WelcomePage } from ‘../pages/welcome/welcome‘;
6 import { Storage } from ‘@ionic/storage‘;
7 @Component({
8 template: `<ion-nav [root]="rootPage"></ion-nav>`,
9 })
10 export class MyApp {
11 rootPage: any;
12 constructor(platform: Platform, public storage: Storage) {
13 this.storage.get(‘firstIn‘).then((result) => {
14 if(result){
15 this.rootPage = HomePage;
16 }
17 else{
18 this.storage.set(‘firstIn‘, true);
19 this.rootPage = WelcomePage;
20 }
21 }
22 );
23 platform.ready().then(() => {
24 // Okay, so the platform is ready and our plugins are available.
25 // Here you can do any higher level native things you might need.
26 StatusBar.styleDefault();
27 });
28 }
29 }
这里判断是否是第一次开启app采用的是native的storage组件，第一次启动会写入storage一个变量firstIn,下次启动时如果读取到这个变量则直接跳过欢迎页，注意ionic2开始storage默认使用的是IndexedDB，而不是LocalStorage
这一篇是我网上找到的，因为希望方便我自己查看所有写出来在博客。
移动端触屏也就h5页面左右滑动返回上一页？
移动端触屏也就H5页面左右滑动返回上一页？注意，本非在一个页面中的滑动翻页效果~！APP上能实现，不知道HTML上能不能实现呢？参考技术A原生的没有，可以使用插件jquerymobile或者zeptojs，都有滑动事件 查看详情
js实现移动端手指左右上下滑动翻页效果
varele=document.getElementsByClassName("img-box")[0];varbeginX,beginY,endX,endY,swipeLeft,swipeRight;ele.addEventListener(‘touchstart‘,function(event){event.stopPropagation();event.preventDefault();be 查看详情
android带有可滑动效果的用户引导页slidingtutorial-android
Simplelibrarythathelpsdeveloperstocreateawesomeslidingandroidapptutorial. Readour CaseStudy:SlidingtutorialforAndroidbyCleveroadslidingtutorial-android项目地址：slidingtutorial-android&nb 查看详情
荣耀手机左右滑动屏幕怎么不是翻页
...成翻页方式的设置之后，翻页效果的改变就可以看到了。左右翻页的时候效果就是我们选择的那一个翻页方式。 查看详情
viewpager详解引导页(代码片段)
...能等等。目前市场上的app的引导页大部分都是采用ViewPager滑动的方式实现，每 查看详情
可扩展的引导页脚
...tstrap中制作可扩展的页脚。单击页脚时，我希望内容向上滑动并将其上方的部分向上推。当前，当单击所有内容时，所有内容都会滑到折叠下方。任何帮助将非常感激。这是我正在使用的代码以及fiddle<sectionclass="red"><divcl 查看详情
如何禁用 UITableView 上的左右滑动手势
】如何禁用UITableView上的左右滑动手势【英文标题】：HowcanIdisableleftandrightswipegesturesonaUITableView【发布时间】：2012-05-0319:59:53【问题描述】：我有一个UIPageViewController，它在每个内容视图中都有一个大表。当我开始在UITableView之外... 查看详情
ios~uicollectionview横向分页滑动，cell左右横向排列
参考技术A需求：固定高度一个区域，里面左右分页显示很多个图标，在每一页中的图标先从左往右排，排满后再从上往下排。这一页排满后排下一页。图中这样的：上面cell的顺序我已经标出来了。像这样的需求，第一反应是用U... 查看详情
哪位大神知道怎么用appium实现引导页的滑动，并且成功跳转到主界面？
通过获取屏幕的尺寸大小，然后通过swipe进行滑动，具体代码如下：from appium import webdriverfrom time import sleepcapabilites = "platformName": "Android","platformVersion": "5.1.1",&quo... 查看详情
swift+uipageviewcontroller纯代码实现引导页
...NavigationController的Controller容器。它既可以实现UIScrollView的滑动效果，也可以实现UIPageController的翻页效果。其中每个具体的视图由各自的ViewController进行维护管理，UIPage 查看详情
确定滑动事件是针对左滑动还是右滑动
...间】：2016-08-2612:12:55【问题描述】：我正在使用Angular2和ionic2并试图捕捉左右滑动。我可以捕捉滑动，但不知道如何确定它是向左还是向右滑动。在我的html中，我有：<ion-content(swipe)="swipeEvent($eve 查看详情
app进首页之前，发生了什么
手指无聊的在手机屏幕上滑动，N多程序跟着手指左左右右的翻来覆去，忽然眼角扫见了一个亮眼的程序，仔细一打量觉得有点意思，随手点击一下，等着程序启动。。。。。。场景是太常见了，那么在点击图标之后，APP首页展... 查看详情
ionic2使用slides制作滑动效果的类型选择栏
类似的效果如下图： 1.生成一个component ionic g component MySlide 2.在my-slide.html中添加代码： [html] viewplain copy <ion-slides cla 查看详情
viewpager详解引导页(代码片段)
...能等等。目前市场上的app的引导页大部分都是采用ViewPager滑动的方式实现，每一个页面采用图片或者素材加图片的方式填充。一、Splash界面的实现Splash界面通常在app启动时弹出的界面，一般在这时做一些数据的初始化操... 查看详情
无法使用 ionic2 在设备上获取上一页名称
】无法使用ionic2在设备上获取上一页名称【英文标题】：cannotgetpreviouspagenameondeviceusingionic2【发布时间】：2017-06-1505:13:04【问题描述】：我正在使用离子2。我更新了我的ionic版本。离子版本3.4.0如果用户未通过身份验证，我的根... 查看详情
在百度看小说怎么取消左、右滑动,在怎么打开上、下滑动模式
...右滑则是打开上下翻页的阅读模式，而往左滑则是默认的左右翻页阅读模式。自动翻译的方法：轻触屏幕--设置--（电子书往左滑动）--选择翻页方式，浏览器小说支持平滑翻页、覆盖翻页、上下翻页，其中平滑翻页和覆盖翻页均... 查看详情
问题记录解决滑动冲突问题-监听滑动事件，阻止滑动事件冒泡(代码片段)
业务场景：父容器是一个支持左右滑动切换的Tab页，子组件是一个支持左右滚动的div内容展示。当左右滑动子组件内容时，会同时触发Tab滑动切换，与预期不符。解决方案：如果是vue框架的话，可以在该子... 查看详情
问题记录解决滑动冲突问题-监听滑动事件，阻止滑动事件冒泡(代码片段)
业务场景：父容器是一个支持左右滑动切换的Tab页，子组件是一个支持左右滚动的div内容展示。当左右滑动子组件内容时，会同时触发Tab滑动切换，与预期不符。解决方案：如果是vue框架的话，可以在该子... 查看详情