解决android中icon只能使用一张icon的问题

最新推荐文章于 2025-05-15 10:01:21 发布

原创最新推荐文章于 2025-05-15 10:01:21 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic #tab #android #自定义 #icon

ionic 专栏收录该内容

44 篇文章

订阅专栏

本文介绍如何在Ionic应用中实现Tab图标根据条件动态变化的效果，包括HTML结构绑定及TS逻辑处理，配合自定义CSS样式实现不同状态下的图标显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.html 中绑定 ionselect的方法，tabicon使用变量

<ion-tabs>
<ion-tab [root]="tab1Root" (ionSelect)="change(0)" [tabTitle]="tab1Title"
tabIcon="{{wenzhen}}"></ion-tab>
<ion-tab [root]="tab2Root" (ionSelect)="change(1)" [tabTitle]="tab2Title"
tabIcon="{{huanzhe}}"></ion-tab>
<ion-tab [root]="tab3Root" (ionSelect)="change(2)" [tabTitle]="tab3Title"
tabIcon="{{wode}}"></ion-tab>
</ion-tabs>

.ts 中

import { Component } 
from '@angular/core';
import { TranslateService } 
from '@ngx-translate/core';
import { IonicPage, NavController, Platform }
from 'ionic-angular';

import { Tab1Root } 
from '../pages';
import { Tab2Root } 
from '../pages';
import { Tab3Root } 
from '../pages';

@IonicPage()
@Component({
selector: 'page-tabs',
templateUrl: 'tabs.html'
})
export class
TabsPage {
tab1Root: any
= Tab1Root;
tab2Root: any
= Tab2Root;
tab3Root: any
= Tab3Root;

tab1Title = " ";
tab2Title = " ";
tab3Title = " ";

wenzhen = "wenzhen";
huanzhe = "huanzhe";
wode = "wode";

constructor(public
navCtrl:
NavController, 
public translateService:
TranslateService, 
public platform:
Platform) {
translateService.get(['TAB1_TITLE',
'TAB2_TITLE', 'TAB3_TITLE']).subscribe(values
=> {
this.tab1Title 
= values['TAB1_TITLE'];
this.tab2Title 
= values['TAB2_TITLE'];
this.tab3Title 
= values['TAB3_TITLE'];
});
}

change(a:
number) {
if (this.platform.is("android")) {
if(a==0){
this.wenzhen 
= "wenzhenandroid";
this.huanzhe 
= "huanzhe";
this.wode =
"wode";
}else if(a==1){
this.wenzhen 
= "wenzhen";
this.huanzhe 
= "huanzheandroid";
this.wode =
"wode";
}else if(a==2){
this.wenzhen 
= "wenzhen";
this.huanzhe 
= "huanzhe";
this.wode =
"wodeandroid";
}
}
}


}

自定义css icon

.ion-ios-wenzhen:before {
@include font-size-custom;
background: 
no-repeat url('../assets/imgs/wenzhenbefore.png');
}

.ion-ios-wenzhen-outline {
@include font-size-custom;
background: 
no-repeat url('../assets/imgs/wenzhen.png');
}

.ion-md-wenzhen {
@include font-size-custom;
background: 
no-repeat url('../assets/imgs/wenzhen.png');
}

.ion-md-wenzhenandroid:before {
@include font-size-custom;
background: 
no-repeat url('../assets/imgs/wenzhenbefore.png');
}