问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我有以下代码：

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

谢谢！

原文由 davidesp 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripttypescriptionic-frameworkionic4stenciljs
阅读 462
1 个回答
得票最新
社区维基
1

The ion-menu needs a contentId and the ion-router-outlet needs an id , so the menu contentId must be the ion-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>

原文由 deanwilliammills 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题