Question

在我的应用程序中，我有一个带有项目（家，联系人，tab1，tab2）的侧菜单，以及带有选项卡（tab1，tab2）的选项卡菜单。当我从侧面菜单中单击tab1或tab2时，选项卡菜单在带有侧面菜单的页面上可见，但是当我从侧面菜单中单击“主页”或“联系人”时，选项卡菜单消失了。我需要所有页面的标签菜单和侧面菜单。如果我从侧面菜单中单击主页，则选项卡菜单应该在主页中没有活动标签的地方。

谢谢您的帮助。

Tabs.html

<ion-tabs [selectedIndex]="myIndex">
    <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="HOME"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="BOND"></ion-tab>
  </ion-tabs>

Tabs.ts

 tab1Root = Tab1Page; tab2Root = Tab2Page;
constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.myIndex = navParams.data.tabIndex;
  }

Menu.ts

rootPage = TabsPage;


@ViewChild(Nav) nav: Nav;
  pages: PageInterface[] = [
    { title: 'Home', component: HomePage },
      { title: 'Contact', component: ContactPage},
      { title: 'Tab 1', component: TabsPage,tabComponent: Tab1Page, index:0 },
      { title: 'Tab 2', component: TabsPage,tabComponent: Tab2Page, index:1 },
  ];
  constructor(public navCtrl: NavController, public navParams: NavParams,
  private app:App) {
  }
  openPage(page: PageInterface)  {
    let params = {};

    // The index is equal to the order of our tabs inside tabs.ts
    if (page.index) {
      params = { tabIndex: page.index };
    }

    // If tabs page is already active just change the tab index

      if (this.nav.getActiveChildNavs().length && page.index != undefined) {
        this.nav.getActiveChildNavs()[0].select(page.index);
      } else {

        this.nav.setRoot(page.component,params);
      }

  }

Menu.html

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title text-center class="clss_toogle_mnu"></ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="menu_background">
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <span>{{p.title}}</span>
      </button>
    </ion-list>

</ion-content>

</ion-menu>


<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

修改：在menu.ts中，我在setRoot中添加了参数。

Answer 1

在menu.ts文件中尝试这种方式

$('.counter').each(function() {
  var $this = $(this),
      countTo = $this.attr('data-count');

  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },
  {
    duration: 4000,
    easing:'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
    }

  });  
});

并尝试在openPage方法中实现

pages: PageInterface[] = [
{ title: 'Menu', pageName: 'TabsPage', tabComponent: 'HomePage', index: 0, icon: 'home' },
{ title: 'List', pageName: 'TabsPage', tabComponent: 'ListPage', index: 1, icon: 'contacts' },
{ title: 'Test', pageName: 'TestPage', icon: 'home' }]

我希望这会有所帮助

ionic 3侧面菜单和选项卡菜单导航

1 个答案: