Ionic自定义底部Tab图标的方法

本文基于Ionic6.12.0, node14.12.0, cordova10.0.0

准备工作

众所周知，Ionic官方提供了很多tab图标供我们使用，但是在实际的工作中，我们的图标肯定都是要设计师亲自设计的。在Ionic中，要使用设计师亲自设计的tab图标，需要让设计师把图标导出为svg格式的文件发给你。

我这里设计师已经发给我了：

代码部分

首先找到我们的tabs.page.html文件，改为下面这样：

<ion-tabs #tabs (ionTabsDidChange)="setCurrentTab()">
​
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon src={{homeIcon}}></ion-icon>
      <ion-label>home</ion-label>
    </ion-tab-button>
​
    <ion-tab-button tab="tab2">
      <ion-icon src={{vipIcon}}></ion-icon>
      <ion-label>vip</ion-label>
    </ion-tab-button>
​
    <ion-tab-button tab="tab3">
      <ion-icon src={{meIcon}}></ion-icon>
      <ion-label>me</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
​
</ion-tabs>

然后找到tabs.page.ts文件，改为下面这样：

import { Component, ViewChild } from '@angular/core';
import { IonTabs } from '@ionic/angular';
​
@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {
  public homeIcon: any;
  public vipIcon: any;
  public meIcon: any;
  public selectedTab: any;
​
  @ViewChild('tabs', { static: false }) tabs: IonTabs;
  constructor() {}
​
  setCurrentTab() {
    this.selectedTab = this.tabs.getSelected();
      
    switch (this.selectedTab) {
      case 'tab1':
        this.homeIcon = '../../assets/icon/home_active.svg';
        this.vipIcon = '../../assets/icon/vip.svg';
        this.meIcon = '../../assets/icon/me.svg';
        break;
      case 'tab2':
        this.homeIcon = '../../assets/icon/home.svg';
        this.vipIcon = '../../assets/icon/vip_active.svg';
        this.meIcon = '../../assets/icon/me.svg';
        break;
      case 'tab3':
        this.homeIcon = '../../assets/icon/home.svg';
        this.vipIcon = '../../assets/icon/vip.svg';
        this.meIcon = '../../assets/icon/me_active.svg';
        break;
    }
  }
​
}

简单的解释一下：

首先我们通过ViewChild得到ion-tabs这个组件，然后每次用户点击tab的时候，我们就可以通过这行代码：this.selectedTab = this.tabs.getSelected();来获取到被点击的tab的名称的字符串。然后通过switch比对，设置相应的icon的链接，就OK了。

效果展示