ionic3踩坑体验（一）絮叨

ionic3踩坑体验（一）絮叨

首先，所谓‘踩坑’，并不是说一定是什么ionic使用的难点、痛点，只是遇到什么问题，解决了想起来了就一下。

为什么第一篇题目叫絮叨呢？

因为我遇到‘坑’时，都把它记到了印象笔记中，所以我是把‘坑’都踩了一遍再来写这篇文章。也算是对ionic框架的总结吧，所以 第一篇就叫絮叨把。

当我们通过cli开始一个ionic应用时，会提示我们选择一个模版，空白、带侧边菜单、底部菜单等。其中super 会提供给我们懒加载的写法。

ios和android组件有不同的样式

首先，ionic应用在ios设备和android设备的显示效果上默认是不相同的。我们可以通过设置config文件或[mode]=""让ionic组件使用ios或android样式，ios的默认样式会好看一点,但在android上某些显示会变得违和。

 IonicModule.forRoot(MyApp,{

  iconMode:'ios',//  在整个应用程序中为所有图标使用的模式。可用选项："ios"，"md"

  mode:'ios'//在整个应用程序中使用的模式。

  })

单个组件可以以属性方式声明：
比如

  <ion-segment [(ngModel)]="icons" mode="md">

路由跳转

从一个tab的子页，跳转到另一个tab页，不能直接

 this.navCtrl.push()

 //可以这么实现
 this.navCtrl.goToRoot(ShopCartPage);   // ShopCartPage 是tab组件名
 this.navCtrl.parent.select(2);  // 2是跳转tab的index

注：ionic3关于路由跳转问题还是不少的，不过ionic4使用angular原生的机制了。

push和pop动画

当我们自己写page中的header或为header修改一些样式，然后用ionic的ion-content时，我们进入该页或退出该页时，在苹果设备中可能会造成动画不统一。

安卓设备没有该问题，所以我们调用NavController.pop()时可以加ops对象{animation:' md-transition'}，使用android默认动画效果。animation可以加的字符串有 md-transition, ios-transition and wp-transition.

这个动画应该可以自己定义，有空可以试一下。