ionic笔记（九）侧边栏组件ion-menu以及底部tabs结合侧边栏ion-menu

1. 侧边栏组件ion-menu的基本使用

1. 创建项目

ionic start myApp sidemenu	// 如果要创建侧边栏的，就带上最后的sidemenu

需要cd到你要创建项目的目录，然后输入命令回车

然后在vscode中打开文件夹，选择它，打开

我们发现它和以前项目的区别只有在根模块里，比以前多了一个ion-menu

然后我们这段代码删了，自己写一个

  
    
      
        Start Menu
      
    
    
      
        Menu Item
        Menu Item
        Menu Item
        Menu Item
        Menu Item
      
    
  
  	// 注意底部必须有这句，要不然出不来效果

属性	作用	可选值
side	配置侧边栏的位置	start end
menuId	侧边栏的唯一表示
type	配置侧边栏的弹出方式	overlay,reveal,push
swipeGesture	滑动弹出侧边栏	true, false

然后看其他标签，有一个，
加在一个上，点击一下，侧边栏就会自动收回

然后ion-menu-button,自带的已经隐藏了，我也找不到，但是我可以在顶部直接写出两个，一个左边，一个右边，写在ion-menu的外面

  
    Title
    
      
    
    
      
    
  

2. 侧边栏ion-menu中的事件和方法。

1. 给ion-menu定义menuId属性
   
2. 控制菜单的页面中引入下面代码

import { MenuController } from '@ionic/angular';

3. 初始化构造函数

constructor(private menu: MenuController) { }

4. 对应方法中通过js控制侧边栏

  openSlideMenu() {

    // 通过js来操纵侧边栏
    this.menu.open('first');

  }

3. 底部tabs结合侧边栏ion-menu

1. 新建一个项目

ionic start  ionictabsmenu tabs

2. 在这个项目中新建几个页面,然后自动生成路由

ionic g page button
ionic g page news
ionic g page product

在tab1里面写一个button，跳转到button页面，button里先写一个返回按钮

然后我们想让他左滑可以出现侧边栏，在app.component.html里面写i-menu按提示回车，然后把标题改成用户信息，把内容改成新闻和产品

  
    
      
        用户信息
      
    
    
      
        
          新闻
        
        
          产品
        
      
    
  

但是想实现拉出侧边栏，还需要在下面的标签加一个main

然后左拉出现侧边栏，再加一个按钮

在tab1上面写一个i-menu-button，menuId要和i-menu的id一样。

然后加两个路由，在item上加routlink，分别跳转到新闻和产品

在新闻和产品页面加点东西

再在i-item外面加i-menu-toggle实现点击侧边栏自动消失