我在我的应用程序中使用离子标签,我想在标签按钮中使用图片.我想动态设置这张图片.
I use ion-tabs in my App and I want to use an picture in a tab-button. I want to set this picture dynamicly.
就我而言,我有一个与不同用户关联的帐户.我想根据所选用户更改我的标签图片.
In my case, I have an account with different users linked to it. I want to change my tab picture depending of the selected user.
我有这个:
我想要这个:
我的标签中的代码:
<ion-tabs tabsHighlight="false">
<ion-tab [root]="HomePage"
tabsHideOnSubPages="true"
tabIcon="checkbox"
tabTitle="A faire"
tabBadge="5"
tabBadgeStyle="notif">
</ion-tab>
<ion-tab [root]="ToComePage"
tabsHideOnSubPages="true"
tabIcon="time" tabTitle="A venir"
tabBadge="0"
tabBadgeStyle="notif">
</ion-tab>
<ion-tab [root]="HistoricPage"
tabsHideOnSubPages="true"
tabIcon="book"
tabTitle="Historique">
</ion-tab>
<ion-tab [root]="MenuPage"
tabsHideOnSubPages="true"
//I want to delete this tab Icon and replace it by a picture.
tabIcon="menu"
tabTitle="Menu">
</ion-tab>
</ion-tabs>
我不知道该怎么做,一个想法?
I don't know how to do that, an idea ?
终于找到解决方案了!我只是写在创建的 DOM 中.
Finally I find a solution ! I just write in the created DOM.
我喜欢这样:
updateAccountTab() : void {
let array = document.getElementsByClassName('tabbar');
let tabbar = array[0];
let element = tabbar.childNodes[tabbar.childElementCount-1];
if(element) {
element.removeChild(element.childNodes[1]);
let img = document.createElement("img");
img.setAttribute("class", "tab-icon-custom tab-button-icon icon icon-md");
img.setAttribute("src", this.pdata.user.profile_thumbnail);
element.insertBefore(img, element.childNodes[1]);
}
}
这篇关于Ionic 2:在标签按钮中使用图片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持html5模板网!