问题标签 [ion-menu]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
306 浏览

javascript - 无法使用量角器滑动打开 Ionic 离子菜单

我们有这个 Ionic3 离子菜单(隐藏的左侧滑出菜单),我们必须向右滑动它才能显示。在 Chrome 上,只需单击鼠标即可轻松完成。但是不能用量角器来做。

这是离子离子菜单:

这是Chrome 的 F12 选项卡上的 ion-menu 元素的打印屏幕。

到目前为止我已经尝试过:

另外,我在这里通过@Boland 尝试了此解决方案,滑动并单击按钮量角器,没有错误但没有任何反应。奇怪的是,如果我再次尝试在元素上单击(),我不会再收到“失败:元素不可见”,甚至 wait() 说元素是可点击的(但菜单仍然不会滑动打开)。

附加信息:
这是我的 spec.ts(TypeScript):

这是我的 conf.js 文件:

其他信息:

我错过了什么吗?我做错了吗?
我很感激任何帮助。有什么线索吗?

0 投票
0 回答
389 浏览

angular - 使用带有离子菜单的离子导航的 Ionic 3 嵌套离子拆分窗格不会切换并且行为异常(Deeplinks)

我有一个split-pane带有可切换嵌套split-pane页面的导航,其信息侧菜单设置如下:

目标是只在需要时显示侧边菜单,并且仍然有一个大的内容容器。

问题是当使用左侧的主导航setRoot(很像选项卡)时,内容只会在每第二次导航切换时切换一次,侧边菜单通常会在第一次切换时消失,然后错误地显示上一页的侧边菜单。

我已经完成了一些日志记录,getActiveNavs()发现getRootNavs()正在创建许多导航、、、n4等,n5有时并且是不同的。n6n7activeNavrootNav

0 投票
1 回答
573 浏览

angular - 打开带有模态的侧边菜单

我刚刚与 Ionic 合作了几天并坚持了下来。每次打开模式时,我都无法滑动侧边菜单,并且我在该模式中推送或设置根目录的任何页面也无法打开侧边菜单。

我有一个页面。- PedidoCadastroPage。

并调用此方法:

并尝试打开侧面菜单,但没有任何反应。

当我关闭模式时,侧面菜单在 PedidoCadastroPage 中打开

0 投票
2 回答
2057 浏览

angular - 离子 3 菜单在 setRoot 后不显示

在我的用例中,我想在我的 ionic 3 angular 应用程序中显示侧面菜单和选项卡。用例是:最初显示带有隐藏侧菜单的选项卡(设置为启用(假))。第一个页面显示一个添加到购物车的按钮,这样做会在标题区域显示一个购物车,然后单击购物车会显示一个登录页面。一旦你登录,订单摘要页面就会出现。此时我想显示侧面菜单。所以在ionviwedidload我设置menu.enable(true). 虽然它显示了菜单图标,但实际菜单没有出现。

最小的测试用例是https://www.dropbox.com/s/tq202w3p6yf32fj/tab-menu_app.zip?dl=0

尝试:

1. 运行应用程序
2. 单击添加到购物车按钮
3. 单击右侧标题中的购物车
4. 这将带来登录页面模型。单击登录按钮
5。摘要页面显示菜单图标。点击它什么也没做

0 投票
2 回答
1496 浏览

ionic-framework - Ionic 3 组合标签页和侧边菜单不起作用

我按照这篇文章结合了sidemenu和Tabs页面。

app.html 有我的菜单。我用#nav 将 ion-nav 绑定到我的 ion-menu 的 [Content]。

在我的 app.component.ts 中,我点击了事件。他们将不同的 Tabs 页面设置为 root,并且只有一个正常页面。

这看起来像这样:

在我的标签页中,我正在使用 [selectedIndex],如下所示:

但它不工作。

问题:当我打开菜单并更改选项卡页面时,我可以看到选项卡如何更改并且选择了右侧选项卡图标,但选项卡上的内容没有更改。如果我进入正常页面,则显示正确。如果我从普通页面转到选项卡页面,则选项卡页面将正确显示。如果我想回到另一个标签页。它不会再次更改所有内容。

我试过.... MyTabs.select(0)。同样的问题。

我目前正在使用离子服务进行测试。

任何人的想法,出了什么问题?

更新

经过尝试和错误编码,从 [selectedIndex]="0" 更改回 myTabs.select(0) 在标签页的 .ts 文件中,如文章中所示。这不起作用。但我做了这样的超时:

现在我可以看到,选项卡上的内容已正确替换。但它看起来不是一个好的解决方法,因为现在我看到旧内容在通过选择替换之前加载。如果我现在打开标签页 2,我可以从标签页 1 中看到呈现的标签页 1 后面的内容(正在执行标签页 1 的 ionViewDidLoad、ionViewWillEnter...)。然后在选择完成后,标签页 2 的标签 1 正在呈现。

更新 2

应用程序.html:

app.component.ts

例如其中一个选项卡页面(其他是这样的):

工作流程(没有超时解决方法):

  1. 在将 Login HomePage as root 替换为 RealisationTabsPage 后,加载 Tab 1 子页面(准备)
  2. open Menu 点击一个菜单点,打开另一个Tabs页面,例如contacttabspage
  3. 加载contacttabspage 的选项卡。此选项卡的选项卡 1 已选中并处于活动状态。但是contacttabspage标签1后面的子页面仍然是realisationtabspage(准备)的子页面。
  4. 现在我打开菜单并转到无标签页(FAQ)。常见问题解答已正确呈现。
  5. 打开菜单:我要去一个选项卡页面,不要介意哪个选项卡页面(实现、联系人、信息、管理......),选项卡页面正确呈现。
  6. 现在我要从这个标签页转到另一个标签页,所以问题又来了。我看到了上一个标签页的上一个子页面。

如果我使用而不是使用 select() 函数,则会出现同样的问题。

0 投票
1 回答
365 浏览

ionic3 - 如何在 Ionic3 中将汉堡菜单图标保留在工具栏的右侧

我正在尝试下面的代码将图标移动到右侧。

但是当我尝试使用 side="right" 时,列表来自右侧,但汉堡菜单图标向右移动。有没有办法实现这个解决方案。如果有人有这个想法,请帮助我。

0 投票
1 回答
1069 浏览

css - 如何更改 ion-menu 的标题颜色,而不更改 ion-navbar 的颜色?

我有下面的离子导航栏代码,我在右侧有一个菜单图标。而且我想更改该菜单标题的颜色。但是当我更改 ion-navbar 的颜色时,菜单标题的颜色也会发生变化。我想要 ion-navbar 和 ion-menu 的颜色不同。

为了改变 ion-navbar 的颜色,我在 variable.scss 中添加以下行

谁能帮助我如何保持两者的不同颜色?

0 投票
2 回答
39683 浏览

ionic-framework - ionic 4 添加侧边菜单

我用标签模板开始了一个项目,后来我决定添加一个侧面菜单。问题是侧边菜单根本不出现。这是我的 app.components.html 看起来像

实际上,在完成以上操作之后,我的实际页面会出现一秒钟,并因此显示一个白页。

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

但我已经有内容元素。

0 投票
2 回答
952 浏览

angular7 - 由于没有可用的 app.css,如何在 ionic 4 中为 ion-menu 添加 css?

我想设计 ion-menu 并在菜单中实现 css,但是我们将在哪里编写 css 我没有得到,因为没有可用的 app.css。我想添加类别,我想在其中添加子类别,但来自 Web 服务。如何做到这一点请帮助我。

我已经尝试过,但我能够显示我将从 api 获得的静态而不是动态的菜单选项。请指导我该怎么做。

我希望动态数据显示在侧边菜单中并设计侧边菜单。

app.component.ts

0 投票
2 回答
840 浏览

ionic-framework - 在 Ionic 4 项目中垂直居中离子菜单内容的推荐方法是什么?

我需要将ion-menu内容垂直居中,以便从 UX 角度更容易访问。我不确定最好的方法。

这是ionic starter 项目代码,由ionic start myProjectName sidemenu.

离子启动器模板

所以我正在尝试做类似下面的事情。 在此处输入图像描述

编辑:离子组件指令已经使用 flex。我正在寻找针对 Ionic 4 的特定解决方案(保持响应性),其中 ion-menu 嵌套在 ion-content 指令内的 ion-list 中。SO链接中提供的答案均不适用于我的问题。