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/