离子4添加侧菜单



我用选项卡模板启动了一个项目,后来我决定添加一个侧菜单。问题是侧菜单根本没有出现。这是我的app.components.html看起来像

<ion-app>
<ion-split-pane>
<ion-menu side="start">
<ion-header translucent>
<ion-toolbar color="secondary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content><ion-list><ion-item>he vik</ion-item></ion-list></ion-content>
</ion-menu>
<ion-router-outlet></ion-router-outlet>
</ion-split-pane>
</ion-app>

实际上,在完成以上操作后,我的实际页面会出现一小段时间,并因此显示一个白色页面。

在控制台中,我看到一个错误

sz7tok82.entry.js:5 Menu: must have a "content" element to listen for drag events on.

但我已经有了内容元素。

Sirius2013是正确的,您需要使用contentId属性。请参阅下面的工作示例:

App.component.html

<ion-app>
<ion-menu contentId="content1" side="start">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
menu stuff
</ion-content>
</ion-menu>
<ion-router-outlet id="content1" main></ion-router-outlet>
</ion-app>


AnyPage.html

在要显示侧菜单的页面中,可以使用ion菜单按钮标记。
参见此示例:

<ion-header>
<ion-toolbar>
<ion-title>Page Title</ion-title>
<ion-buttons slot="start">
<ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>

autoHide标记设置为false,这样您将始终看到菜单按钮。

文档:https://beta.ionicframework.com/docs/api/menu-button

<ion-menu>
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>

https://beta.ionicframework.com/docs/api/menu

尝试使用contentId属性。

相关内容

  • 没有找到相关文章

最新更新