前言：之前做ionic項(xiàng)目時(shí)用的是ionic2.x的版本世落，項(xiàng)目做好時(shí)發(fā)現(xiàn)ionic都發(fā)布了ionic3.3.0的版本了糠悼，據(jù)官網(wǎng)文檔介紹從ionic2.x→ionic3.x改善的挺大的，于是決定把項(xiàng)目升級到ionic3.3.0,關(guān)于怎么把已有的2.x的項(xiàng)目升級到3.x請參考?我之前寫的一篇文章旬蟋，那里面有介紹褒墨。好了不扯了震贵，下面我說下我在把項(xiàng)目從ionic2.x升級到ionic3.x后所遇到的坑。
1.click事件延遲
? ? ? ? 在用2.x的版本時(shí)郁惜，項(xiàng)目中的click事件沒有什么延遲堡距，反應(yīng)還挺快的，但是升級到3.x后發(fā)現(xiàn)在ios設(shè)備上click事件延遲很明顯。
解決辦法： 點(diǎn)擊事件click()最好寫在<ion-button>吏颖、<a>這兩個(gè)自帶點(diǎn)擊功能的元素身上,如果你非要給除這兩個(gè)標(biāo)簽外的其他標(biāo)簽加click()事件搔体，請給添加上tappable屬性。
<div ?tappable ?(click) = fun() >點(diǎn)擊事件</div>
<ion-item? tappable? (click) = fun() >點(diǎn)擊事件</ion-item>
2.color屬性不起作用
? ? ? ? 在用2.x開發(fā)時(shí)有的地方的顏色樣式是通過添加 color="primary" 屬性的形式設(shè)置的半醉，但是升級3.x之后這種方式除了一些自帶的color屬性的組件疚俱、標(biāo)簽（eg: <ion-buton>）可以生效，其他的都失效了缩多。
解決辦法： ?添加 ion-text 屬性
? ? ionic2.x這么用 ↓
<div color="danger">我是危險(xiǎn)的紅色</div>
<p color="secondary">我是有顏色的</p>
<span color="primary">我也是有顏色的</span>
? ? ionic3.x這么用 ↓?
<div ?ion-text ?color="danger">我是危險(xiǎn)的紅色</div><p ?ion-text ?color="secondary">我是有顏色的</p><span ?ion-text ?color="primary">我也是有顏色的</span>
至于這個(gè)color屬性后面的值primary呆奕、secondary、danger這些都是可以自己設(shè)置的衬吆，在根目錄的src文件夾里面的theme文件夾下有一個(gè)variables.scss的文件梁钾，可以在該文件中自行設(shè)置，如下圖
3.升級后命令的變化
? ? ? ? ionic3與ionic2最大不同就是命令變化了很多逊抡，下表給出了兩個(gè)版本之間命令區(qū)別
4.Grid組件中<ion-col>標(biāo)簽上控制列所占寬度由原來width-50變?yōu)閏ol-6
? ? ? ?在ionic2.x中姆泻，假如一行有兩列，第一列寬度占比30%冒嫡，第二列寬度占比70%,用官方給的grid組件代碼是這樣:
<ion-grid ?text-center>
? ? <ion-row>
? ? ? ? <ion-col ?width-30>30%</ion-col>
? ? ? ? <ion-col ?width-70>70%</ion-col>
? ? </ion-row>
<ion-grid>
width-30就是列寬占行寬的30%拇勃，但是到了ionic3.X的版本中，width-X 這種用法被廢除了孝凌，取而代之的是col-4方咆，在ionic3的版本中g(shù)rid中默認(rèn)把一行分為12個(gè)柵格，也就是如果你在ionic2中<ion-col? width-50>這樣寫的話蟀架，在ionic3中就要寫成<ion-col ?col-6>瓣赂，因?yàn)槟J(rèn)是12個(gè)柵格，寫為col-6意思是占6個(gè)柵格片拍，也就是50%的意思煌集。但是如果我們想2-8分的話，還按默認(rèn)12格來那就麻煩了捌省，因?yàn)閏ol-后面只能是整數(shù)牙勘，接小數(shù)的話就會這個(gè)屬性就會失效。這個(gè)時(shí)候需要我們把默認(rèn)的12柵格改為10柵格所禀，在全局樣式中把默認(rèn)的12改為10就好了方面，代碼如下： ??
$grid-columns:10;
改完后，那就好辦了色徘，直接按col-2? col-8來就好了（ionic3.x）恭金，代碼如下：
<ion-grid ?text-center>
? ? <ion-row>
? ? ? ? <ion-col? col-2>20%</ion-col>
? ? ? ? <ion-col? col-8>80%</ion-col>
? ? </ion-row>
</ion-grid>
效果如下圖：
