1、先上原始效果图:                                        2、完成后效果

                              

2、实现思路:

  ionic3 的底部栏是隐藏在 div.tabbar.show-tabbar 标签内的,我们可以通过控制器看到。本文实现思路即是通过js动态的控制div.tabbar.show-tabbar 元素的display属性来实现控制底部导航栏的显示和隐藏。

3、实现代码如下:

  

// js控制底部导航栏的显隐性
let tabbar = this.Utils.getClassName(document,'tabbar');
if(this.showStatus){
tabbar[0].setAttribute("class","tabbar");
}else{
tabbar[0].setAttribute("class","tabbar show-tabbar");
}

4、完成收工。

ionic3 动态设置tabs页面底部导航栏隐藏,并显示输入框添加评论的更多相关文章

  1. 使用mui框架开发App,当input获取焦点时,键盘弹出,底部导航栏上升。

    转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢 问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部 ...

  2. 小程序 - 底部导航栏“tabBar”

    小程序底部导航 1.app.json页面配置: { "pages": [ "pages/movie/movie", "pages/cinema/cin ...

  3. uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据

    h5端的uni-app项目 需求:uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据 百度的方法如下: uni.switchTab({ url: '/p ...

  4. Android_ViewPager+Fragment实现页面滑动和底部导航栏

    1.Xml中底部导航栏由一个RadioGroup组成,其上是ViewPager. <?xml version="1.0" encoding="utf-8" ...

  5. TextView+Fragment实现底部导航栏

    前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以 ...

  6. Android底部导航栏——FrameLayout + RadioGroup

    原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6285881.html Android底部导航栏有多种实现方式,本文详细介绍FrameLayout ...

  7. TabHost实现底部导航栏

    源代码及可执行文件下载地址:http://files.cnblogs.com/rainboy2010/tabnavigation.zip          现在很多Android应用界面都采用底部导航 ...

  8. 04-Flutter移动电商实战-打通底部导航栏

    关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...

  9. Flutter——BottomNavigationBar组件(底部导航栏组件)

    BottomNavigationBar常用的属性: 属性名 说明 items List<BottomNavigationBarItem> 底部导航条按钮集合 iconSize icon c ...

随机推荐

  1. 【学习总结】Python-3-身份运算符 is 与 == 区别

    参考:菜鸟教程-Python3运算符 身份运算符 is 和 is not:用于比较两个对象的存储单元 判断两个标识符是不是引用自相同或不同对象,返回一个布尔值 对于"同一个对象"中 ...

  2. Hadoop伪分布式环境安装

    一.环境准备 阿里云ECS(Centos7).已预装JDK8 Hadoop安装包 hadoop-2.7.7.tar.gz 二. 安装步骤 1.确认JDK环境的安装位置 命令 echo $JAVA_HO ...

  3. selectDOM操作详解-select option详细解释

    首先从一个面试题来讲,我最近在做前端面试题,题目如下: 完成函数showlmg(),要求能够动态根据下拉列表的选项变化,更新图片的显示<body><script type=" ...

  4. showfont - 展示当前"显示屏-字体 映射"中的所有字符.

    总览 showfont 描述 showfont 利用8-bit控制台模式的 Application Charset Map(应用字符集映射) 中一些连续的开关, 以当前字体在屏幕上展示所有的256个或 ...

  5. crontab+selenium不能定时执行测试的原因

    上一篇我提到用无界面selenium实现网页的自动签到.本来测试好好 的没问题,但是加进crontab定时任务却一点动静页没有,后来发现是浏览器的显示问题,自动任务要这样写: 12 3 * * * e ...

  6. 第十一章 存储之ConfigMap

    1.描述信息 ConfigMap 功能在 Kubernetes1.2 版本中引入,许多应用程序会从配置文件.命令行参数或环境变量中读取配置信息.ConfigMap API 给我们提供了向容器中注入配置 ...

  7. oracle10G rac 10.2.0.1升级10.2.0.4

    前言 ocr版本查询指令:  ocrcheck vote盘路径查询指令: crsctl query css votedisk 相关指令参考来源:http://hzhg12345.blog.163.co ...

  8. 06.yield

    Thread.yield()方法的作用:暂停当前正在执行的线程,并执行其他线程.(可能没有效果) yield()让当前正在运行的线程回到可运行状态,以允许具有相同优先级的其他线程获得运行的机会.因此, ...

  9. string,const char*, char*转换之后还是指向同一片内存地址么?

    class Same { public: void reverse(const char* str) { char* A = const_cast<char*>(str); A[] = ' ...

  10. SPI子系统

    一.SPI子系统模型 三个组成部分: SPI核心:连通了SPI客户驱动.SPI主控制器驱动 SPI控制器驱动:驱动芯片中的SPI控制器 SPI的FLASH(客户驱动) 二.SPI控制器驱动分析 sta ...