16

我有以下代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ionic 4 - Menu</title>
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css" />
<script src="https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"></script>
<script>
window.addEventListener('load', event => {
    document.querySelector('.button_details').addEventListener('click', (event) => {
        document.querySelector('.menu_main').toggle();
    });
});
</script>
</head>
<body>

    <ion-menu class="menu_main" side="start">
        <ion-header>
            <ion-toolbar color="secondary">
                <ion-title>Left Menu</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content padding>
            Hello World!
        </ion-content>
    </ion-menu>
    <ion-menu-controller></ion-menu-controller>

    <ion-card style="display:inline-block;width:300px">
        <ion-card-header>
            <ion-card-title>Hello World</ion-card-title>
        </ion-card-header>
        <div style="padding:10px 10px;text-align:right;">
            <ion-button color="primary" class="button_details">Details</ion-button>
        </div>
    </ion-card>

</body>

</html>

它工作正常，但有一个例外：当页面加载时，控制台上出现以下错误：

Error: "Menu: must have a 'content' element to listen for drag events on."

在这里你有CodePen.io：

https://codepen.io/anon/pen/qJgEzZ/?editors=1011

您可以在下面尝试代码StackOverflow：

window.addEventListener('load', event => {
	document.querySelector('.button_details').addEventListener('click', (event) => {
		document.querySelector('.menu_main').toggle();
	});
});
<script src="https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"></script>
<link href="https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css" rel="stylesheet"/>
	<ion-menu class="menu_main" side="start">
		<ion-header>
			<ion-toolbar color="secondary">
				<ion-title>Left Menu</ion-title>
			</ion-toolbar>
		</ion-header>
		<ion-content padding>
			Hello World!
		</ion-content>
	</ion-menu>
	<ion-menu-controller></ion-menu-controller>

	<ion-card style="display:inline-block;width:300px">
		<ion-card-header>
			<ion-card-title>Hello World</ion-card-title>
		</ion-card-header>
		<div style="padding:10px 10px;text-align:right;">
			<ion-button color="primary" class="button_details">Details</ion-button>
		</div>
	</ion-card>

关于如何解决这个问题的任何想法？这里缺少什么？

你CodePen.io能用正确的代码来分叉我吗？

谢谢！

4

6 回答 6

26

ion-menu需求 a和需求 a contentId，所以菜单必须是id：ion-router-outletidcontentIdion-router-outlet

<ion-menu side="start" contentId="menuContent">
   <ion-header>
        <ion-toolbar color="primary">
            <ion-title>Start Menu</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
        </ion-list>
    </ion-content>
</ion-menu>

<ion-router-outlet id="menuContent"></ion-router-outlet>
于 2019-11-20T11:49:16.330 回答
20

如果你想要代码：使用content-id="content"和 on ion-contentid="content"

<ion-menu class="menu_main" side="start" content-id="content">
        <ion-header>
            <ion-toolbar color="secondary">
                <ion-title>Left Menu</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content padding>
            Hello World!
        </ion-content>
    </ion-menu>
    <ion-menu-controller></ion-menu-controller>

    <ion-content id="content">
     <ion-card style="display:inline-block;width:300px">
        <ion-card-header>
            <ion-card-title>Hello World</ion-card-title>
        </ion-card-header>
        <div style="padding:10px 10px;text-align:right;">
            <ion-button color="primary" class="button_details">Details</ion-button>
        </div>
    </ion-card>
</ion-content>
于 2019-07-17T17:21:02.453 回答
9

对于将来的人来说，您可能会遇到离子分离窗格内有路由器插座的问题，对吗？

做这个：

<ion-split-pane contentId="my-content">
     <ion-menu contentId="my-content"> ... </ion-menu>
     <ion-router-outlet id="my-content"></ion-router-outlet>
</ion-split-pane>

请注意，您的 [main] 属性ion-router-outlet现在已消失

来源：https ://github.com/ionic-team/ionic/issues/19618#issuecomment-540648915

于 2019-11-19T23:46:13.313 回答
4

如果您不需要滑动手势来打开菜单，您可以将swipe-gesture="false"属性添加到ion-menu标签。IMO 这应该可以消除错误，但目前还没有。我在 GitHub 上创建了一个问题。 https://codepen.io/anon/pen/mzgRBj?editors=1011

如果您希望滑动手势起作用，您必须ion-menu使用该content-id属性在元素上引用内容元素的 ID，请参阅https://codepen.io/anon/pen/BqEpxE?editors=1011

于 2018-10-29T10:35:39.850 回答
0

它可能与谁有关，这就是我所做的：

<ion-split-pane contentId="main">
    <ion-menu side="start" contentId="main">
        <ion-header>
            <ion-toolbar color="primary">
                <ion-title>Start Menu</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-list>
                <ion-item>LogOut</ion-item>
            </ion-list>
        </ion-content>
    </ion-menu>
    <ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>
于 2020-12-29T19:09:12.547 回答
0

如果你使用 React 和 Ionic 6，Ionic 文档有点过时了。我必须更改以下项目才能显示菜单：

  1. autoHide={false}在 IonMenuButton 上设置；
  2. 在 IonMenuButton 上设置menu="start"（菜单属性的值必须等于 IonMenu 侧属性）；

改编后的代码菜单：

  <IonMenu side="start" contentId="main-content">
    <IonHeader>
      <IonToolbar>
        <IonTitle>Hello</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <IonList>
        <IonItem>Hello</IonItem>
      </IonList>
    </IonContent>
  </IonMenu>

  <div id="main-content">
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonMenuButton autoHide={false} menu="start"></IonMenuButton>
        </IonButtons>
      </IonToolbar>
    </IonHeader>
  </div>
</IonApp>

来自 ion-menu 文档的原始代码 -> https://github.com/ionic-team/ionic-docs/blob/00c0885346e0f048bb2c2bda104ea26cd9d1ff52/static/demos/api/menu/index.html

于 2022-01-07T13:51:50.817 回答