Ionic4 组件 - 菜单：必须有一个“内容”元素来监听拖动事件

Posted 2023-03-13

技术标签:

【中文标题】Ionic4 组件 - 菜单：必须有一个“内容”元素来监听拖动事件【英文标题】：Ionic4 component - Menu: must have a 'content' element to listen for drag events on 【发布时间】：2019-03-30 21:25:05 【问题描述】：

我有以下代码：

<!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

您可以在下面*** 上尝试代码：

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>

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

能否请您使用正确的代码 fork 我的CodePen.io？

谢谢！

【问题讨论】：

错误来自 ion-menu-controller 标签。如果您不想使用它，只需删除此标签即可。即使您删除该标签，错误仍然存在。你可以自己试试。 ok 替换 ion-menu-controller 并添加并再次测试。你能把codepen.io贴在这里吗？谢谢！ ion-menu 有 contentId 属性，尝试切换到<ion-router-outlet id="content1" .. 和<ion-menu contentId="content1".. 【参考方案1】：

ion-menu 需要一个contentId，ion-router-outlet 需要一个id，所以菜单contentId 必须是ion-router-outlet id：

<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>

【讨论】：

感谢您的回答。那里的许多教程都已过时，并没有反映这一点。【参考方案2】：

如果你想要代码：使用content-id="content" 和离子含量id="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>

【讨论】：

【参考方案3】：

对于那些未来的人来说，您可能会遇到在您的 ion-split-pane 中有路由器插座的问题，对吧？

这样做：

<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>

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

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

【讨论】：

谢谢，这对我有帮助，错误信息不清楚如何处理这种情况【参考方案4】：

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

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

【讨论】：

【参考方案5】：

对谁来说，这就是我所做的：

<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>

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。添加 contentId="main" 对我有用，谢谢如果没有说明您提供的示例代码的哪一部分解决了问题，很难理解为什么它可以解决问题。即使代码很好，不解释也不是解决方案。【参考方案6】：

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

autoHide=false

menu="start"

改编后的代码菜单：

  <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

【讨论】：

以上是关于Ionic4 组件 - 菜单：必须有一个“内容”元素来监听拖动事件的主要内容，如果未能解决你的问题，请参考以下文章

如何在 ionic 4 中创建手风琴式侧边菜单

ion-picker组件示例（ionic4）

另一个组件 Ionic 4 中的组件

ionic4 无限滚动加载组件 ion-infinite-scroll-content 的loadingSpinner 属性

反应组件中的jQuery

Ionic 4：侧边菜单（ion-menu）在 IOS 中没有正确关闭