本文基于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了。
文章评论