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

雨点打透心脏的1/2处 2022-05-31 12:56 234阅读 0赞

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

## 代码地址 ##

https://gitee.com/yellowcong/ionic

## 实现效果 ##

![这里写图片描述][SouthEast]

## 侧滑菜单 ##

### 前台代码 ###

<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一样，获取到节点对象信息，然后直接隐藏掉。  
![这里写图片描述][SouthEast 1]

## 完整代码 ##

### 界面代码（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/][https_ionicframework.com_docs_api_components_app_MenuController]

[SouthEast]: /images/20220531/48708e2a838d415b9771a9991468a110.png
[SouthEast 1]: /images/20220531/b472de002ec848bbb6085fbea7ad264e.png
[https_ionicframework.com_docs_api_components_app_MenuController]: https://ionicframework.com/docs/api/components/app/MenuController/