javascript - Ionic 4 更改带有自定义图标的 ion-tab-button
问题描述
单击后,我正在尝试ion-icon
使用自定义 src进行更改ion-tab-button
我已经尝试过,使用(点击)事件触发功能并更改离子图标内的 [src]="..."
有什么合适的方法来改变这种骇人听闻的风格吗?
HTML:
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="news/home" (click)="changeNewsIcon()">
<ion-icon [src]="newsIcon"></ion-icon>
<ion-label class="tab-title">News</ion-label>
</ion-tab-button>
<ion-tab-button tab="user" (click)="changeSearchIcon()">
<ion-icon [src]="searchIcon"></ion-icon>
<ion-label class="tab-title">Search</ion-label>
</ion-tab-button>
<ion-tab-button tab="networking" (click)="changeNetworkIcon()">
<ion-icon [src]="notiIcon"></ion-icon>
<ion-label class="tab-title">Networking</ion-label>
</ion-tab-button>
<ion-tab-button tab="chat" (click)="changeChatIcon()">
<ion-icon [src]="chatIcon"></ion-icon>
<ion-label class="tab-title">Chat</ion-label>
</ion-tab-button>
<ion-tab-button tab="profile" (click)="changeProfIcon()">
<ion-icon [src]="profIcon"></ion-icon>
<ion-label class="tab-title">Profile</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
TS:
newsIcon = './assets/tabs/home.svg';
searchIcon = './assets/tabs/search.svg';
notiIcon = './assets/tabs/group.svg';
chatIcon = './assets/tabs/chat.svg';
profIcon = './assets/tabs/user.svg';
changeNewsIcon(): void {
// change news icon
this.newsIcon = './assets/tabs/clicked-home.svg';
// reset others icon
this.searchIcon = './assets/tabs/search.svg';
this.notiIcon = './assets/tabs/group.svg';
this.chatIcon = './assets/tabs/chat.svg';
this.profIcon = './assets/tabs/user.svg';
}
changeSearchIcon(): void {
// change user icon
this.searchIcon = './assets/tabs/clicked-search.svg';
// reset others icon
this.newsIcon = './assets/tabs/home.svg';
this.notiIcon = './assets/tabs/group.svg';
this.chatIcon = './assets/tabs/chat.svg';
this.profIcon = './assets/tabs/user.svg';
}
...
感谢是否有人会提供帮助
解决方案
我不确定我的方法是否更好,但这可能是做同样事情的另一种方式。
HTML:
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="news/home" (click)="changeNewsIcon()">
<ion-icon [src]="isNewsSelected ? newsIcon : clickedNewsIcon"></ion-icon>
<ion-label class="tab-title">News</ion-label>
</ion-tab-button>
<ion-tab-button tab="user" (click)="changeSearchIcon()">
<ion-icon [src]="isSearchSelected ? searchIcon clickedSearchIcon"></ion-icon>
<ion-label class="tab-title">Search</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
打字稿组件:
export class SomeComponent {
newsIcon = './assets/tabs/home.svg';
clickedNewsIcon = './assets/tabs/clicked-home.svg';
searchIcon = './assets/tabs/search.svg';
clickedSsearchIcon = './assets/tabs/clicked-search.svg';
isNewsSelected = false;
isSearchSelected= false;
changeNewsIcon(): void {
resetAll();
this.isNewsSelected = true;
}
changeSearchIcon(): void {
resetAll();
this.isSearchSelected = true;
}
resetAll(){
this.isNewsSelected = false;
this.isSearchSelected= false;
}
}
推荐阅读
- pine-script - 在两个先前计算的指标之间找到最高的 bar_index
- docker - 无法从我的主机(我的 Windows 机器)打开 docker 应用程序 - localhost 没有发送任何数据
- r - 如何根据 R 中的加权数据计算汇总统计信息?(AUC、MSE、MAE、R2 等)
- c# - Log4net 没有将数据插入到 oracle 数据库中?
- python - WTForms TextAreaField 长度验证
- c - C 函数(如 memcpy)如何处理 void* 数组,因为您不能对 void 指针进行算术运算?
- reactjs - 过滤平面列表时未定义不是对象
- javascript - 从 cv::normalize 接收错误“表达式的类型为 v128 但预期为 i32”
- android - 如何阻止用户在android中拖动状态栏
- c# - AxAXVLC .NET 插件在 1 fps 视频的第一帧处冻结