title: ionic3踩坑體驗（一）絮叨
date: 2018-02-01 22:54:09
tags: ionic
---

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.

這個動畫應該可以自己定義，有空可以試一下。