离子内容与选项卡菜单重叠答案

【问题标题】：Ionic Contents is overlapping the tab menu离子内容与选项卡菜单重叠
【发布时间】：2021-11-12 16:51:13
【问题描述】：

我在页面底部有一个包含各种离子项目和菜单选项卡的页面。

随着离子项目的增加，它似乎与选项卡菜单栏重叠，如图所示。我可以滚动页面，但我希望能够限制滚动到标签栏。

有人可以建议我如何设置它，以便从顶部到标签栏所有内容都是可滚动的吗？

【问题讨论】：

【解决方案1】：

这是重叠的，因为 z-index 尝试为您的选项卡菜单提供 1 个更高的值，就像代码中的任何元素的 z-index 值最高为 5 比将选项卡菜单 z-index 值设置为 6 一样。

如果你想滚动到标签菜单并显示到最后一个图标而不是在底部菜单的高度添加margin-top/margin-bottom。

【讨论】：

【解决方案2】：

将标签菜单放在<ion-footer>元素内

应该是这样的：

<ion-header>
...
</ion-header>

<ion-content>
...all your elements go here
</ion-content>

<ion-footer>
...tab menu goes here
</ion-footer>

【讨论】：