离子 2/3 中的动态标签栏

Question

需要帮助为 Ionic 3 应用程序创建动态标签栏。 我已经创建了动态选项卡栏，它从 API 接收选项卡名称，存储在存储中并在之后在应用程序中创建它们

ts:

unionTabs = []; 
this.storage.get('tabs').then((tabs)=>{
tabs.forEach(title => {
switch(title){
case 'Home': this.unionTabs.push({title: title, root: HomePage, icon: 'home'}) 
break;
case 'Social Feed': this.unionTabs.push({title: title, root: SocialFeedPage, icon: 'pulse'})
break;
case 'Contact': this.unionTabs.push({title: title, root: ContactPage, icon: 'contacts'})
break;
case 'Mail': this.unionTabs.push({title: title, root: MailClientPage, icon: 'mail'})
break;
case 'Settings': this.unionTabs.push({title: title, root: SettingsPage, icon: 'settings'})
break;
default: alert('There is some error with the tabs!!')
}
});
})

.html：

<ion-tabs *ngIf="unionTabs.length>0;else noData">
<ion-tab *ngFor="let tab of unionTabs" [root]="tab.root" [tabTitle]="tab.title" [tabIcon]="tab.icon"></ion-tab>
</ion-tabs>

但是无法弄清楚如何仅显示五 (5( 个选项卡，最后一个选项卡应显示其他选项卡的列表。不幸的是，我无法硬编码这 5 个选项卡，因为我从服务器接收不同的选项卡(取决于用户帐户(

谢谢。

Answer 1

好的，我想我找到了解决方案。

this.storage.get('tabs').then((tabs) => {
if (tabs.length < 6) {
for (let title of tabs) {
this.drawTab(title);
}
} else {
var tabNumber = 0;
for (let title of tabs) {
if (tabNumber === 4) {
this.unionTabs.push({ title: 'More', root: TabListPage, icon: 'menu' });
break
}
tabNumber++;
this.drawTab(title);
}
}
})
drawTab(tabName: string) {
switch (tabName) {
case 'Home': this.unionTabs.push({ title: tabName, root: HomePage, icon: 'home' });
break;
case 'Social Feed': this.unionTabs.push({ title: tabName, root: SocialFeedPage, icon: 'pulse' })
break;
case 'Contact': this.unionTabs.push({ title: tabName, root: ContactPage, icon: 'contacts' })
break;
case 'Mail': this.unionTabs.push({ title: tabName, root: MailClientPage, icon: 'mail' })
break;
case 'Events': this.unionTabs.push({ title: tabName, root: EventsPage, icon: 'megaphone' })
break;
case 'Settings': this.unionTabs.push({ title: tabName, root: SettingsPage, icon: 'settings' })
break;
default: alert('There is some error with the tabs!!')
}

}

在"更多页面"上，您可以随意使用其余选项卡：

listTabs = [];
this.storage.get('tabs').then((tabs)=>{
let tabCounter = 0;
for (let tab of tabs){
tabCounter++;
if(tabCounter > 4){
this.listTabs.push(tab)
}
}
})

希望有人会发现它像我一样有用。