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. Windows Server 2008 用户管理

    默认用户和组 默认用户 默认只有来宾用户(Guest)和管理员(Administrator) 默认组 创建账户 图形界面创建用户 创建用户选项解析 对于公司新员工,分配给他的电脑,应该让其有一定的自主 ...

  2. Pyspark:AssertionError: dataType should be DataType

    1. schema参数,AssertionError: dataType should be DataType # AssertionError: dataType should be DataTyp ...

  3. 基于beautifulSoup进行电影网站排名的获取与格式化输出

    要求 编写代码完成以下任务: ① 将地址"http://www.cbooo.cn/year?year=2019"源代码使用任意方法保存到指定文件中(文件类型不限). ② 使用文件流 ...

  4. 牛客网暑期ACM多校训练营(第三场)H Diff-prime Pairs (贡献)

    牛客网暑期ACM多校训练营(第三场)H Diff-prime Pairs (贡献) 链接:https://ac.nowcoder.com/acm/contest/141/H来源:牛客网 Eddy ha ...

  5. 【BZOJ2324】[ZJOI2011]营救皮卡丘 给定起点最小权K链可相交覆盖

    #include<bits/stdc++.h> using namespace std; typedef long long ll; typedef ][]; int main() { i ...

  6. NodeJS 开发博客(四) 日志及安全攻击

    node 操作文件: const fs = require('fs'); const path = require('path'); const filename = path.resolve(__d ...

  7. 如何在vscode中用standard style 风格去验证 vue文件

    1 JavaScript Standard Style简介 本工具通过以下三种方式为你(及你的团队)节省大量时间: 无须配置. 史上最便捷的统一代码风格的方式,轻松拥有. 自动代码格式化. 只需运行 ...

  8. Copy Books

    Description Given n books and the i-th book has pages[i] pages. There are k persons to copy these bo ...

  9. win32窗口程序分析

    1.分析消息的附加参数 例如:为了查看程序处理了哪些消息   在回调函数中调用输出函数,在控制台中输出消息的值:

  10. 【安卓周记】笔记复习记录:No.1

    [安卓] 1. 安装APK记得考虑兼容7.0,Uri不能直接从Uri.parse()中构建,要使用FileProvider构建Uri. <provider android:name=" ...