Question

我正在开发一个Ionic 2应用程序，并在我的应用程序中有多个选项卡。

My Plunker供参考。
在底部标签中，有两个标签图标可用，一个是home icon标签，另一个是menu icon标签
截至目前，当点击底部标签menu icon时，顶部标签正在显示，如果再次单击按钮菜单图标，顶部标签将被隐藏，这是我们的功能。
< / LI>
我正在寻找的on clicking the menu icon顶部标签需要显示，如果我们点击底部标签上的任何位置，顶部标签会显示并隐藏...... < / p>

我们正在寻找两项任务： -

第一个是on clicking the menu icon顶部标签需要显示和隐藏。
第二个是点击底部home icon，需要重定向home page。
这两个图标需要执行两个不同的操作，但是如果点击home icon顶部标签显示在这里。我不知道我在哪里犯了错误。我是离子2和角2的新手，所以请帮助我......
实际上我们在(click)="x()"中使用了这个功能ion-tabs，而且我在ion-tab中使用了这个功能它不起作用所以请检查并更新...我不知道我不知道我在哪里做错了......

点击 tab menu Icon：

    <ion-tabs tabs-only (click)="x()" >
    <ion-tab tabIcon="home" [root]="tab1Root" ></ion-tab>
    <ion-tab tabIcon="menu"  ></ion-tab>

</ion-tabs>

我的多个标签元素：

    <ion-tabs tabs-only (click)="x()" >
    <ion-tab tabIcon="home" [root]="tab1Root" ></ion-tab>
    <ion-tab tabIcon="menu"  ></ion-tab>

</ion-tabs>

<ion-tabs tabs-only2 tabbar  [hidden]="hideTopTab" >
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Page" tabIcon="star"></ion-tab>

</ion-tabs>

以下函数用于[show]和[hidden]另一个标签元素： -

    hideTopTab:boolean=true;
   x(){
     console.log(this.hideTopTab);

    this.hideTopTab = !this.hideTopTab;
}

请更新Plunker如果您有解决方案。

实际上我希望得到一个完整的解决方案就像这个链接菜单操作： - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav如果我们点击菜单图标显示项目列表，再次单击菜单按钮，列表会被隐藏.. 。

单击菜单图标选项卡需要在离子2中显示另一个选项卡？

0 个答案: