我正在使用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-nav
和ion-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 论坛中的链接。