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效果
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018.12.13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
