1、创建 tab4 模块

ionic g page tab4

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

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

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

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

<ion-tabs>

  <ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="flash"></ion-icon>
<ion-label>Tab One</ion-label>
</ion-tab-button> <ion-tab-button tab="tab2">
<ion-icon name="apps"></ion-icon>
<ion-label>Tab Two</ion-label>
</ion-tab-button> <ion-tab-button tab="tab3">
<ion-icon name="send"></ion-icon>
<ion-label>Tab Three</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab4">
<ion-icon name="settings"></ion-icon>
<ion-label>Tab four</ion-label>
</ion-tab-button>
</ion-tab-bar> </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. 前端BOM对象

    location.href 查看当前的url location.href http://www.baidu.com 跳转URL location.reload 重载当前页面 windows.alert ...

  2. 每日一题-——LeetCode(617) 合并二叉树

    题目描述: 给定两个二叉树,想象当你将它们中的一个覆盖到另一个上时,两个二叉树的一些节点便会重叠.你需要将他们合并为一个新的二叉树.合并的规则是如果两个节点重叠,那么将他们的值相加作为节点合并后的新值 ...

  3. 用 Redis 实现延时任务

    原文:https://cloud.tencent.com/developer/article/1358266 1.什么是延时任务 延时任务,顾名思义,就是延迟一段时间后才执行的任务.延时任务的使用还是 ...

  4. PHP字符串截取,计算字符串长度

    /** * 字符串截取,支持中文和其他编码 * @param [string] $str [字符串] * @param integer $start [起始位置] * @param integer $ ...

  5. Mybatis3.1-[tp_32-33]-_映射文件_select_resultMap关联查询_association分步查询_延迟加载

    笔记要点出错分析与总结 工程组织 1.定义接口 DepartmentMapper package com.dao; import com.bean.Department; public interfa ...

  6. 使用Topshelf创建Windows服务[转载]

    概述 Topshelf是创建Windows服务的另一种方法,老外的一篇文章Create a .NET Windows Service in 5 steps with Topshelf通过5个步骤详细的 ...

  7. php多版本配置

    需求分析: 需要在一台装有php5.4的测试服务器跑的上php7.2.x的项目 安装phpenv(php版本控制) $ sudo yum install git $ mkdir -p repos/gi ...

  8. 《ABCD组》第四次作业:项目需求调研与分析

    <ABCD组>第四次作业:项目需求调研与分析 项目 内容 这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https:// ...

  9. vue中读取excel中数据

    安装xlsx npm install xlsx --save-dev 安装好后在需要的页面 引入插件 import xlsx from 'xlsx' 调用 $('#uploadFile').chang ...

  10. singleton单例模式小结

    1.饿汉模式 public class SingletonEntity2 { // 在类加载的时候创建对象:饿汉模式 public static SingletonEntity2 obj = new ...