文章/答案/技术大牛

发布

社区首页 >问答首页 >离子菜单不起作用离子侧菜单不显示

问离子菜单不起作用离子侧菜单不显示
EN

Stack Overflow用户

提问于 2018-04-04 04:36:12

回答 4查看 14.4K关注 0票数 4

我正在尝试在离子应用程序中添加侧边菜单，但它不会出现，我正在附加所有文件，请帮助我！

app.html文件

<ion-menu [content]="mycontent">
    <ion-header>
        <ion-toolbar>
            <ion-title>Menu</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <button ion-item (click)=o nLoad(ServicesMessPage)>
                <ion-icon name="quote" item-left></ion-icon>
                Mess
            </button>
            <button ion-item (click)=o nLoad(ServicesLaundryPage)>
                <ion-icon name="quote" item-left></ion-icon>
                Laundry
            </button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #mycontent></ion-nav>

然后在app.component.ts中，我添加了所有必要的导入

app.component.ts文件

import { Component, ViewChild } from '@angular/core';
import { Platform, NavController, MenuController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { LoginPage } from '../pages/login/login';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = LoginPage;
  @ViewChild('mycontent') nav: NavController
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private menuCtrl: MenuController) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

  onLoad(page: any) {
    this.nav.setRoot(page);
    this.menuCtrl.close();
  }
}

在ServicesPage html中，我包含了菜单

services.html

<ion-header>
  <ion-navbar hideBackButton="true">
    <ion-buttons start>
      <button ion-button name="menu" menuToggle>
      </button>
    </ion-buttons>
    <ion-title>Dashboard</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>

angular

ionic3

回答 4

Stack Overflow用户

发布于 2020-01-18 16:55:26

对于任何显示离子菜单的通用*.html文件，需要确保4件事：

ion-menu具有'contentId‘字段
上述'contentId'被传递给同级html标记，因为 html具有主E213标记，并且在同级容器

中使用class="ion-page"

And来切换菜单ion-menu-button <>G221

给定代码，stand通过单击菜单按钮显示sidemenu。

<ion-menu contentId="mainContent">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
       <!-- write your menu content here-->
 </ion-menu>     
 <div class="ion-page" id = "mainContent" main>
         <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
         </ion-buttons>
             <!-- write your app content here-->
  </div>

注意:使用ion- menu -button的是切换菜单屏幕的方法之一。如Here所述，您还可以使用menuController更改菜单栏

票数 7

Stack Overflow用户

发布于 2018-04-04 10:15:52

我在我的项目上测试了你的代码，它工作得很好，我唯一注意到的是你没有看到按钮中的图标菜单

更改此行

<button ion-button name="menu" menuToggle> </button>

对于services.html中的这一个

   <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
   </button>

使用此行，菜单的图标将会出现。

票数 1

Stack Overflow用户

发布于 2018-04-04 11:45:03

首先，你在app.html，，，中的错误，可能是你的打字错误。现在我用以下代码重构你的代码：

<ion-menu [content]="mycontent">
    <ion-header>
        <ion-toolbar>
            <ion-title>Menu</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <button ion-item (click)=onLoad(ServicesMessPage)>
                <ion-icon name="quote" item-left></ion-icon>
                Mess
            </button>
            <button ion-item (click)=onLoad(ServicesLaundryPage)>
                <ion-icon name="quote" item-left></ion-icon>
                Laundry
            </button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #mycontent></ion-nav>

还需要在 services.html中进行更改

  <ion-navbar hideBackButton="true">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Dashboard</ion-title>
  </ion-navbar>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49638764

复制

相似问题

问离子菜单不起作用离子侧菜单不显示
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问离子菜单不起作用离子侧菜单不显示EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问离子菜单不起作用离子侧菜单不显示
EN