Динамическая вкладка в Ionic 2/3 - PullRequest
Новая
       35

Динамическая вкладка в Ionic 2/3

0 голосов
/ 27 августа 2018

Нужна помощь в создании динамической панели вкладок для приложения 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) вкладок, и последняя вкладка должна отображать список других вкладок. Такая же функциональность есть в приложении Facebook. К сожалению, я не могу жестко запрограммировать эти 5 вкладок, потому что я получаю различные вкладки с сервера (зависит от учетной записи пользователя)

Спасибо.

1 Ответ

0 голосов
/ 27 августа 2018

Хорошо, я думаю, что нашел решение. 

    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!!')
}

}

А на «MorePage» вы можете делать с остальными вкладками все, что захотите: 

listTabs = [];

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

Надеюсь, кто-то найдет это полезным, как я.

...