在chrome浏览器调试中审查元素发现
ionic2里面的图标是通过类添加的
比如说 tabIcon="homeImg"
在页面中研究可以看到在ios上有两个类是
.ion-ios-homeImg 和 .ion-ios-homeImg-outline
第一个是选中的状态，第二个是未选中的状态
而在android上只有一个类 .ion-md-homeImg
选中未选中都是这一个
但是我们可以通过手动添加 .ion-md-homeImg-outline 这个类
在tabs.ts里面创建一个数组用于放置 我们需要的三个tab，
之后写一个Android添加-outline词缀的方法
public test: Array<any> = ['homeImg','clubImg','mineImg'];
constructor(private platform:Platform) {
}
change(a: number) {
if (this.platform.is("android")) {
for (let i = 0; i < this.test.length; i++) {
if (i === a) {
this.test[i] = this.test[i].split("-")[0];
} else {
this.test[i] = this.test[i].split("-")[0] + "-outline";
}
}
}
}
之后我们就可以在这个类上用黑科技(当然没有homeImg这个图标这是我自定义的)
方法:
在app.scss 中做一个全局的图标 可以在任意地方使用
.ion-ios-homeImg:before{
content: '';
width: 30px;
height: 30px;
display: block;
background: no-repeat url('http://www.baidu.com/selection.png');
}
.ion-ios-homeImg-outline{
content: '';
width: 30px;
height: 30px;
display: block;
background: no-repeat url('http://www.baidu.com/unselection.png');
}
.ion-md-homeImg:before{
content: '';
width: 30px;
height: 30px;
display: block;
background: no-repeat url('http://www.baidu.com/selection.png');
}
.ion-md-homeImg-outline{
content: '';
width: 30px;
height: 30px;
display: block;
background: no-repeat url('http://www.baidu.com/unselection.png');
}
这里需要注意一点是selection.png必须使用网络图片，不能够识别本地图片
使用时使用ng2的双向数据绑定，
并且用ionSelect绑定change方法
<ion-tab [root]="tab1Root" (ionSelect)=change(0) [tabsHideOnSubPages]="true" tabTitle="首页" tabIcon="{{test[0]}}"></ion-tab>
效果如下图
------end------
