底部的Ionic 3静态菜单不使用选项卡组件或自定义组件



我正在使用Ionic 3构建一个Android应用程序。我有一个要求,请对此发表您的建议。

我需要在所有屏幕的屏幕底部(类似于选项卡组件(有静态菜单。我知道我可以创建一个自定义组件并将其放置在所有 html 模板中。但是当我使用自定义组件时,它会在每次页面加载时重新加载,因为它位于每个 html 模板中。我不想在每次加载页面时重新加载菜单。它应该是所有页面之外的静态。只有页面才能根据菜单点击加载。

此要求类似于选项卡组件。 我尝试了选项卡组件,但问题是我无法根据我的要求设计选项卡布局,其中包含自定义按钮和带有其他内容的图像以及菜单按钮。

请发布您的建议以克服此问题。提前谢谢。

如果您使用的是 Ionic NavController(这是默认的(,您将在App.component.html中有一个 <ion-nav> 标签

ion-nav 将用你声明的 root 组件替换它的内容 - 以及你使用 NavController 在 NavStack 上推送的任何内容

最简单的解决方案是将自定义组件放在标签旁边:

///app.component.html
<ion-nav root=[rootPage]></ion-nav>
<ion-footer>
    <your-custom-menu></your-custom-menu>
</ion-footer>

(离子脚只是让它粘在底部(

如果您在 ion-nav 标签旁边放置一些东西,它将位于导航堆栈之外,在您导航时未被替换

请记住,如果您打算使用离子ModalControlelr中的模态,则可以将其放在 App.component 的顶部并将其隐藏。

在此处阅读有关ion-navion-tabs的信息:https://ionicframework.com/docs/api/navigation/NavController/

也许可以使用页脚或一些技巧

https://forum.ionicframework.com/t/show-tabs-menu-bar-in-all-page-if-click-on-side-menu-then-tabs-menu-bar-is-not-visible-in-all-pages/101242/7?u=timsar

将"幻灯片"菜单中的所有页面添加到"选项卡"页面并使用 *ngfor 和 show="false" 表示您不想显示其图标选项卡的页面在你的app.component.ts中,而不是使用this.nav.setRoot(mypage(;使用一些功能从选项卡加载您的页面,例如 Ionic 论坛中的链接。

最新更新