ionic4 -- 修改tabs图标

由于现在ionic还处于未正式的情况，所以博主不推荐使用这套新框架做项目开发，因为其源码一直在变化，现遇到有人问tab图标在4里面如何进行操作，带着这样的问题，我们来看看如何去写。

1、创建tabs项目

创建后找到tabs.page.html：

tabs.page.html

官方命令为我们创建好了代码，这里不难发现，tabs分为两大部分：
第一大部分：ion-tab：
这里是路由器，存放页面跳转路由用，此部分的tab作为标签，对应底部tabButton的。

第二大部分：ion-tab-bar：
这里是页面显示组件，每个button都在这里被合理放置并自适应和匹配ionic的主题。

2、查看官方文档

理清楚两大部分的作用后，我们查看官方文档：

官方文档

官方文档中清楚的介绍了tab-bar拥有此事件，我们可以监听此事件来完成我们的需求：

        <ion-tab-bar slot="bottom" (ionTabBarChanged) = "change($event)">
        ....
        </ion-tab-bar>

    export class TabsPage{  
      change(event) {
        console.log('====================================');
        console.log(event);
        console.log('====================================');
      }
  }

3、分析log中的event

event

说明：这里就有我们核心的利用值了，通过获取detail中的tab，匹配html中tab-bar设置tab的值来完成tab button 变化状态的改变：

     <ion-tab-button tab="home" href="/tabs/(home:home)">
      <!-- <ion-icon name="home"></ion-icon> -->
        <img src="../../assets/icon/zfb.png" *ngIf="flag=='home'" class="img-icon"/>
        <img src="../../assets/icon/wx.png" *ngIf="flag!='home'" class="img-icon"/>
      <ion-label>Home</ion-label>
    </ion-tab-button>

  export class TabsPage{  
       flag = 'home';
      change(event) {
          this.flag=event.detail.tab;
      }
  }

这样便完成了我们所有tabs图标的修改。

3、最终效果：

3.1、IOS主题的效果：

IOS效果

3.2、Android主题的效果：

Android效果