Ionic4组件-菜单:必须具有"content"元素才能侦听其上的拖动事件 [英] Ionic4 component - Menu: must have a 'content' element to listen for drag events on
本文介绍了Ionic4组件-菜单:必须具有"content"元素才能侦听其上的拖动事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下代码:
<!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>
它工作正常，但有一个例外::页面加载时，控制台上出现以下错误:
It works fine with one exception: when the page loads, there is the following error on the console:
Error: "Menu: must have a 'content' element to listen for drag events on."
这里有CodePen.io:
https://codepen.io/anon/pen/qJgEzZ/?editors= 1011
下面，您可以在StackOverflow上尝试此处的代码:
And below you can try the code right here on 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>
关于如何解决此问题的任何想法?这里缺少什么?
Any idea on how to solve this problem? What is it missing here?
请问我的CodePen.io用正确的代码分叉吗?
Could you please fork my CodePen.io with a proper code?
谢谢！
推荐答案
如果需要代码:
使用content-id="content"和离子含量id="content"
if you want the code:
use content-id="content" and on ion-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>
这篇关于Ionic4组件-菜单:必须具有"content"元素才能侦听其上的拖动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
