全栈工程师_java全栈工程师_全栈开发者学习经验总结

  • 首页
  • 开发工具
    • 软件安装
    • 软件使用
  • 前端
    • Ionic
    • Android
    • Capacitor
    • Angular
    • Vue
    • 苹果开发者账号
  • 后端
    • Java
    • Python
    • MyBatis
    • Spring
    • SpringBoot
    • SpringMVC
    • SpringCloud
  • 服务器
    • Linux
    • MySQL
    • Nginx
    • Tomcat
    • Docker
  • 其他
    • 生活碎片
    • 报错专区
  • 我
lipsuper
专注产出高质量原创手打文章
  1. 首页
  2. 前端
  3. Ionic
  4. 正文

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

2020年10月16日 524点热度 0人点赞 0条评论

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

准备工作

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

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

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了。

效果展示

自定义图标效果1

自定义图标效果2自定义图标效果3

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小技巧 干货
最后更新:2020年10月16日

lipsuper

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复

COPYRIGHT © 2021 lipsuper.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

渝ICP备2021004735号-1

渝公网安备 50011202502306号