淘先锋技术网

首页 1 2 3 4 5 6 7

tab自定义图标

方法一（优点：简单）

步骤：

1.在src/assets/imgs路径下创建文件夹存放要自定义的tab图标


2.在要需要自定义tab图标的scss文件添加如下代码：

.ion-tab-icon-base {
    width: 32px;
    height: 32px;
    padding: 4px 4px 2px;
  }

  .ion-tab-icon-md-base {
    min-width: 0 !important;
    height: 32px;
  }

  $tabImageName: 'home' 'analytics' 'personal' 'portaltabs';
  @for $i from 1 to 5 {
    //for ios
    .ion-ios-tab-#{nth($tabImageName, $i)} {
      @extend .ion-tab-icon-base;
      content: url("../assets/imgs/tabs/#{nth($tabImageName, $i)}_choosed.png");
    }
    .ion-ios-tab-#{nth($tabImageName, $i)}-outline {
      @extend .ion-tab-icon-base;
      content: url("../assets/imgs/tabs/#{nth($tabImageName, $i)}.png");
    }

    // for android
    .tabs-md .tab-button[aria-selected=true] {
      .ion-md-tab-#{nth($tabImageName, $i)} {
        @extend .ion-tab-icon-md-base;
        content: url("../assets/imgs/tabs/#{nth($tabImageName, $i)}_choosed.png");
      }
    }
    .tabs-md .tab-button[aria-selected=false] {
      .ion-md-tab-#{nth($tabImageName, $i)} {
        @extend .ion-tab-icon-md-base;
        content: url("../assets/imgs/tabs/#{nth($tabImageName, $i)}.png");
      }
    }
  }

注意：

 1）$tabImageName的命名要与src/assets/imgs路径下的图标名要一致

 2）@for $i from 1 to n （n = 1 + 图的张数）

3. 在要需要自定义tab图标的html使用自定义tab图标，如下： 

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="tab-home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="tab-analytics"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="tab-personal"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Portaltabs" tabIcon="tab-portaltabs"></ion-tab>
</ion-tabs>
注意：直接在scss内 $tabImageName的命名前加上"tab"。

总之，下图要一致

     

方法二（缺点：复杂，而且必须在ts中写成数组）

步骤：

1.在app.scss文件中添加如下代码：

//点击
.ion-md-homeImg:before,
.ion-ios-homeImg:before{
  content: '';
  width: 25px;
  height: 25px;
  background: center no-repeat url('../assets/img/default/home_select.png');
}
//未点击
.ion-md-homeImg-outline,
.ion-ios-homeImg-outline{
  content: '';
  width: 25px;
  height: 25px;
  background: center no-repeat url('../assets/img/default/home.png');
}

2.在要需要自定义tab图标的ts文件添加如下代码：

this.displayDefaultTabsList = [
	{title : 'home', url : 'HomePage', tabIcon:'homeImg'},
	{title : 'portaltabs', url : 'PortaltabsPage', tabIcon:'portaltabsImg'},
	{title : 'personal', url : 'PersonalPage', tabIcon:'personalImg'}
]
...
change(index:number){
	if (this.platform.is("android")){
		for (let i = 0; i < this.icon.length; i++) {
			if (i == index) {
				his.displayDefaultTabsList[i].tabIcon.split("-")[0];
				// this.icon[i] = this.icon[i].split("-")[0];
			} else {
				this.displayDefaultTabsList[i].tabIcon =  this.displayDefaultTabsList[i].tabIcon.split("-")[0]+ "-outline";
				// this.icon[i] = this.icon[i].split("-")[0] + "-outline";
			}
		}
	}
}

3.在要需要自定义tab图标的html使用自定义tab图标，如下： 

<ion-tab *ngFor="let defaultTab of displayDefaultTabsList;let index = index;" [root]="defaultTab.url" [tabTitle]="defaultTab.title" [tabIcon]="defaultTab.tabIcon" (ionSelect)="change(index)" >
</ion-tab>
采用方法二时，如果安卓遇到问题，记得要添加change(index:number)方法