ionic3之侧栏菜单与隐藏tabs-yellowcong

ionic3的侧栏菜单案例，这个案例中，主要做了三个事情：1、影藏了默认的返回按钮。2、隐藏了底部导航栏，3、实现侧滑菜单。其实这几样东西看起来挺简单的，但是我也是费了不少时间啊，破玩意刚玩，整得不太明白啊。

代码地址

https://gitee.com/yellowcong/ionic

实现效果

侧滑菜单

前台代码

<ion-menu [content]="mycontent">
        <ion-content>
          <!--菜单-->
          <ion-list>
            <ion-item  *ngFor="let item of menus" (click)="clickItem(item)" >
               {{item}}
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-menu>

后台代码

在点击时间里面，由于item对象是object的，而不是string类型的数据，所以我加上了”“,转化为string类型的数据

 //点击了哪一条消息
  clickItem(item){
       console.log(item);
       this.showInfo(item+"");
   }

   //显示toast消息
   showInfo(name){
       let toast = this.toastCtrl.create({
           message: '点击了'+name, //提示消息
           duration: 3000,//3秒后自动消失
           position: 'bottom',//位置top,bottom
           showCloseButton:true, //是否显示关闭按钮
           closeButtonText:"关闭" //关闭按钮字段
       });

       //关闭后执行的操作
       toast.onDidDismiss(() => { console.log('toast被关闭之后执行'); });

       //显示toast
       toast.present();//符合触发条件后立即执行显示。
   }

影藏底部导航栏

在界面没有加载完成的时候，设定tabbar在加载的时候，影藏，然后在退出的时候显示，这个功能可以解决有些特定的界面，需要影藏导航栏的情况。

//进入界面资源还没有加载完成的情况
    ionViewDidLoad() {
        console.log('ionViewDidLoad FriendsPage');

        // document.getElementById();
        var tabs = document.getElementsByClassName('tabbar').item(0);
        tabs['style'].display = 'none';
     }

     //离开页面的时候，设置显示下面的tabbar
     ionViewWillLeave(){
        var tabs = document.getElementsByClassName('tabbar').item(0);
        tabs['style'].display = 'flex';
     }

原理

其实这个ionic3玩的其实是一个html的游戏，直接在浏览器中查看 tabbar在浏览器所对应的html的代码，然后，在代码中，像js一样，获取到节点对象信息，然后直接隐藏掉。

完整代码

界面代码（menu.html）

界面代码中，主要注意的是如何隐藏掉返回菜单。

<ion-header>
    <!--去掉这个返回菜单-->
    <ion-navbar hideBackButton="true" hide-nav-bar="true">
        <ion-title>
        侧滑菜单
        </ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <h1>侧滑菜单</h1>
    <ion-menu [content]="mycontent">
        <ion-content>
          <!--菜单-->
          <ion-list>
            <ion-item  *ngFor="let item of menus" (click)="clickItem(item)" >
               {{item}}
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-menu>

      <ion-nav #mycontent [root]="rootPage"></ion-nav>

      <!--返回-->
      <button ion-button (click)="back()">反回</button>

      <!--打开和关闭侧栏-->
      <button ion-button (click)="toggoleMenu()">打开/关闭侧栏</button>

</ion-content>

后台代码（menu.ts）

//@angular/core是一个npm的模块，定义了angular的核心功能
import { Component } from '@angular/core';

//NavController就是用来管理和导航页面的一个controlle
//NavParams 这个是参数
import { NavController,NavParams } from 'ionic-angular';

import {ToastController  } from 'ionic-angular';

//导入菜单的控制器
import {MenuController  } from 'ionic-angular';

//导入envent 和tab
import { Events, Tabs } from 'ionic-angular';

import { DomController } from 'ionic-angular';

@Component({
    selector: 'page-web',
    templateUrl: 'menu.html'
  })
//export关键词：将类暴露出去，以便其它的文件可以import到它。
//类的命名：在ionic3中，页面类采用页面名+Page的命名方式，首字母大写，如HomePage, ContactPage等。
export class MenuPage {
    //菜单
    menus=['菜单1','菜单2','菜单2','菜单2','菜单2','菜单2','菜单2'];

    constructor(
        public navCtrl: NavController,
        public params:NavParams,
        public menuCtl:MenuController,
        private toastCtrl: ToastController) {
      }

    //退出
    back(){
        this.navCtrl.pop();
    } 

    //打开菜单
    openMenu(){
        this.menuCtl.open();
    }

    //关闭菜单
    closeMenu(){
        this.menuCtl.close();
    }

    //切换菜单
    toggoleMenu(){
        this.menuCtl.toggle();
    }

    //进入界面资源还没有加载完成的情况
    ionViewDidLoad() {
        console.log('ionViewDidLoad FriendsPage');

        // document.getElementById();
        var tabs = document.getElementsByClassName('tabbar').item(0);
        tabs['style'].display = 'none';
     }

     //当已经进入界面的情况
     ionViewDidEnter(){

     }

     //离开页面的时候，设置显示下面的tabbar
     ionViewWillLeave(){
        var tabs = document.getElementsByClassName('tabbar').item(0);
        tabs['style'].display = 'flex';
     }

     //点击了哪一条消息
    clickItem(item){
        console.log(item);
        this.showInfo(item+"");
    }

    //显示toast消息
    showInfo(name){
        let toast = this.toastCtrl.create({
            message: '点击了'+name, //提示消息
            duration: 3000,//3秒后自动消失
            position: 'bottom',//位置top,bottom
            showCloseButton:true, //是否显示关闭按钮
            closeButtonText:"关闭" //关闭按钮字段
        });

        //关闭后执行的操作
        toast.onDidDismiss(() => { console.log('toast被关闭之后执行'); });

        //显示toast
        toast.present();//符合触发条件后立即执行显示。
    }

}

参考文章

https://ionicframework.com/docs/api/components/app/MenuController/