前言：之前做ionic项目时用的是ionic2.x的版本，项目做好时发现ionic都发布了ionic3.3.0的版本了，据官网文档介绍从ionic2.x→ionic3.x改善的挺大的，于是决定把项目升级到ionic3.3.0,关于怎么把已有的2.x的项目升级到3.x请参考 我之前写的一篇文章，那里面有介绍。好了不扯了，下面我说下我在把项目从ionic2.x升级到ionic3.x后所遇到的坑。
1.click事件延迟
在用2.x的版本时，项目中的click事件没有什么延迟，反应还挺快的，但是升级到3.x后发现在ios设备上click事件延迟很明显。
解决办法： 点击事件click()最好写在<ion-button>、<a>这两个自带点击功能的元素身上,如果你非要给除这两个标签外的其他标签加click()事件，请给添加上tappable属性。
<div tappable (click) = fun() >点击事件</div>
<ion-item tappable (click) = fun() >点击事件</ion-item>
2.color属性不起作用
在用2.x开发时有的地方的颜色样式是通过添加 color="primary" 属性的形式设置的，但是升级3.x之后这种方式除了一些自带的color属性的组件、标签（eg: <ion-buton>）可以生效，其他的都失效了。
解决办法： 添加 ion-text 属性
ionic2.x这么用 ↓
<div color="danger">我是危险的红色</div>
<p color="secondary">我是有颜色的</p>
<span color="primary">我也是有颜色的</span>
ionic3.x这么用 ↓
<div ion-text color="danger">我是危险的红色</div> <p ion-text color="secondary">我是有颜色的</p><span ion-text color="primary">我也是有颜色的</span>
至于这个color属性后面的值primary、secondary、danger这些都是可以自己设置的，在根目录的src文件夹里面的theme文件夹下有一个variables.scss的文件，可以在该文件中自行设置，如下图
全局color
3.升级后命令的变化
ionic3与ionic2最大不同就是命令变化了很多，下表给出了两个版本之间命令区别
ionic2.x到ionic3.x的命令变化
4.Grid组件中<ion-col>标签上控制列所占宽度由原来width-50变为col-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的版本中grid中默认把一行分为12个栅格，也就是如果你在ionic2中<ion-col width-50>这样写的话，在ionic3中就要写成<ion-col col-6>，因为默认是12个栅格，写为col-6意思是占6个栅格，也就是50%的意思。但是如果我们想2-8分的话，还按默认12格来那就麻烦了，因为col-后面只能是整数，接小数的话就会这个属性就会失效。这个时候需要我们把默认的12栅格改为10栅格，在全局样式中把默认的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>
效果如下图：
ion-grid的使用
网友评论