.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');
}