在chrome瀏覽器調(diào)試中審查元素發(fā)現(xiàn)
ionic2里面的圖標是通過類添加的
比如說 tabIcon="homeImg"
在頁面中研究可以看到在ios上有兩個類是
.ion-ios-homeImg 和 .ion-ios-homeImg-outline
第一個是選中的狀態(tài)，第二個是未選中的狀態(tài)
而在android上只有一個類 .ion-md-homeImg
選中未選中都是這一個
但是我們可以通過手動添加 .ion-md-homeImg-outline 這個類
在tabs.ts里面創(chuàng)建一個數(shù)組用于放置 我們需要的三個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必須使用網(wǎng)絡(luò)圖片累颂，不能夠識別本地圖片
使用時使用ng2的雙向數(shù)據(jù)綁定，
并且用ionSelect綁定change方法
<ion-tab [root]="tab1Root" (ionSelect)=change(0) [tabsHideOnSubPages]="true" tabTitle="首頁" tabIcon="{{test[0]}}"></ion-tab>
效果如下圖
------end------
