在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------
作者：Jarvan丶
链接：https://www.jianshu.com/p/aa6fe2be3241
随时随地看视频
