淘先锋技术网

首页 1 2 3 4 5 6 7

方法一(优点:简单)

步骤:

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)方法