前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ionic4 -- 修改tabs图标

ionic4 -- 修改tabs图标

作者头像
stormKid
发布2018-12-26 15:16:21
1.5K0
发布2018-12-26 15:16:21
举报
文章被收录于专栏:计算机编程

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

1、创建tabs项目

创建后找到tabs.page.html:

tabs.page.html

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

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

2、查看官方文档

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

官方文档

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

代码语言:javascript
复制
        <ion-tab-bar slot="bottom" (ionTabBarChanged) = "change($event)">
        ....
        </ion-tab-bar>
代码语言:javascript
复制
    export class TabsPage{  
      change(event) {
        console.log('====================================');
        console.log(event);
        console.log('====================================');
      }
  }

3、分析log中的event

event

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

代码语言:javascript
复制
     <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>
代码语言:javascript
复制
  export class TabsPage{  
       flag = 'home';
      change(event) {
          this.flag=event.detail.tab;
      }
  }

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

3、最终效果:

3.1、IOS主题的效果:

IOS效果

3.2、Android主题的效果:

Android效果

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.12.13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、创建tabs项目
  • 2、查看官方文档
  • 3、分析log中的event
  • 3、最终效果:
    • 3.1、IOS主题的效果:
      • 3.2、Android主题的效果:
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档