1、创建 tab4 模块

  1. ionic g page tab4

2、修改根目录里 app-routing.module.ts 文件里面的路由配置,去掉默认增加的路由

3、tabs.router.module.ts 中新增路由

  1. {
  2. path: 'tab4', loadChildren: '../tab4/tab4.module#Tab4PageModule'
  3. }

4、tabs.page.html 中新增底部 tab 切换按钮

  1. <ion-tabs>
  2.  
  3. <ion-tab-bar slot="bottom">
  4. <ion-tab-button tab="tab1">
  5. <ion-icon name="flash"></ion-icon>
  6. <ion-label>Tab One</ion-label>
  7. </ion-tab-button>
  8.  
  9. <ion-tab-button tab="tab2">
  10. <ion-icon name="apps"></ion-icon>
  11. <ion-label>Tab Two</ion-label>
  12. </ion-tab-button>
  13.  
  14. <ion-tab-button tab="tab3">
  15. <ion-icon name="send"></ion-icon>
  16. <ion-label>Tab Three</ion-label>
  17. </ion-tab-button>
  18. <ion-tab-button tab="tab4">
  19. <ion-icon name="settings"></ion-icon>
  20. <ion-label>Tab four</ion-label>
  21. </ion-tab-button>
  22. </ion-tab-bar>
  23.  
  24. </ion-tabs>

Ionic4.x 新增底部 tabs 页面的更多相关文章

  1. Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色

    1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...

  2. Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu

    1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...

  3. 页面跳转、底部tabs切换页面

    1.页面跳转 import { NavController } from 'ionic-angular'; constructor(public navCtrl: NavController) { } ...

  4. 新增和修改页面的用例设计和Bug提交

    问题: 新增页面和修改页面,基本上输入框都一样,那比如同一个输入框的用例设计: 1. 写了新增页面的用例,修改页面对该输入框还有再写一遍用例的必要吗? 2. 执行用例时,新增页面验证了必填项,长度,数 ...

  5. ionic2 子页面隐藏去掉底部tabs导航,子页面全占满显示方法(至今为止发现的最靠谱的方法)

    项目中遇到 tabs 字页面 可以用以下代码隐藏的方式: imports: [ BrowserModule, // IonicModule.forRoot(MyApp), HttpModule, Io ...

  6. ionic3 动态设置tabs页面底部导航栏隐藏,并显示输入框添加评论

    1.先上原始效果图:                                        2.完成后效果                                2.实现思路: ion ...

  7. Ionic android 底部tabs

    ionic android tabs 默认显示在上部,如果要跟苹果一起统一在底部,那么可以在app.js添加配置 .config(function($ionicConfigProvider) { $i ...

  8. 005-CSS让页脚始终在底部不论页面内容多少

    让页脚始终在页面底部,不论页面内容是多或者少页脚始终在页面底部. 方案一: <!DOCTYPE html> <html> <head> <meta chars ...

  9. JS判断滚动条到底部,页面是否有滚动条

    要判断页面滚动条是否到底,需要了解三个属性: scrollHeight:获取元素内容高度的度量,包括由于溢出导致的视图中不可见内容,说直白点,算上了滚动条不可见的那部分高度. clientHeight ...

随机推荐

  1. java - day019 - 反射

    网络程序,难点在线程 反射 reflect 实用 类对象 来执行反射操作 反射获得一个类的定义信息 反射创建对象 反射调用成员变量, 方法 方法 获得类对象的三种方式 A.class Class.fo ...

  2. [ansible-playbook]4 持续集成环境之分布式部署利器 ansible playbook学习

    3 ansible-play讲的中太少了,今天稍微深入学习一点 预计阅读时间:15分钟 一: 安装部署 参考 http://getansible.com/begin/an_zhuang_ansile ...

  3. 关于Mock的一些网站

    https://github.com/google/googletest/tree/master/googlemock https://blog.csdn.net/hhb200766/article/ ...

  4. Linux网络编程综合运用之MiniFtp实现(八)

    上节中实现了"USER"和"PASS"命令,如下: 事实上FTP是有很多命令组成的,如果就采用上面的这种方法来实现的话,就会有很多if...else if语句, ...

  5. SPOJ LCS Longest Common Substring 和 LG3804 【模板】后缀自动机

    Longest Common Substring 给两个串A和B,求这两个串的最长公共子串. no more than 250000 分析 参照OI wiki. 给定两个字符串 S 和 T ,求出最长 ...

  6. MybatisX idea 快速开发插件

    一.idea安装MybatisX 1.按ctrl+alt+s,弹出Settings 2.在plugins中搜索MybatisX,安装即可 3.点击操作重启idea 二.操作说明 1.业务层点击小鸟进入 ...

  7. Java注解合并,注解继承

    莆田SEO:spring中有时候一个类上面标记很多注解. 实际上Java注解可以进行继承(也就是把多个注解合并成1个) 比如说SpringMVC的注解 @RestController @Request ...

  8. 54、servlet3.0-ServletContainerInitializer

    54.servlet3.0-ServletContainerInitializer Shared libraries(共享库) / runtimes pluggability(运行时插件能力) 1.S ...

  9. 肤浅的聊聊关联子查询,数据集连接,TiDB代码,关系代数,等等

    本章涉及的内容是TiDB的计算层代码,就是我们编译完 TiDB 后在bin目录下生成的 tidb-server 的可执行文件,它是用 go 实现的,里面对 TiPD 和 TiKV实现了Mock,可以单 ...

  10. linux文件共享服务

    linux文件共享配置 Windows访问linux 以下操作都在关闭防火墙和关闭selinux的环境下. 关闭防火墙的命令:service iptables stop关闭SELINUX命令:sete ...