ionic新加页面并实现路由跳转

曾经终败给现在 2022-02-17 09:39 344阅读 0赞

前言

  创建一个ionic的项目，默认下方只有3个tab页：tab1, tab2, tab3，如果想要加上tab4和tab5，这时候就涉及到了路由跳转。

新加页面

  1.运行命名ionic g page tab4，就会在src/app下新建一个tab4的模块；

  2.在tabs.router.module.ts中添加路由跳转:

  1. {
  2.         path: 'tab4',
  3.         children: [
  4.           {
  5.             path: '',
  6.             loadChildren: '../tab4/tab4.module#Tab4PageModule'
  7.           }
  8.         ]
  9.       }

  3.在tabs.page.html中添加显示内容

  1. <ion-tab-button tab="tab4">
  2.       <ion-icon name="notifications"></ion-icon>       //图标的样式
  3.       <ion-label>通知</ion-label>       //显示的内容
  4.     </ion-tab-button>

  https://ionicons.com/ 这是ionic的图标的网站，可以在里面搜索想要的图标替换自带的图标。

  我的项目图标展示：
在这里插入图片描述

按钮跳转界面

  实现效果：
  在这里插入图片描述
  实现方式：

  1.界面跳转：
在这里插入图片描述
  2.返回按钮：
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，344人围观）

还没有评论，来说两句吧...

相关阅读