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. java 调用DB2 SYSPROC.ADMIN_CMD存储过程导出数据

    import java.sql.CallableStatement; import java.sql.Connection; import java.sql.DriverManager; import ...

  2. 更改mysql最大连接数

    方法一: 打开cmd,用"mysql -u root -p;"命令进入mysql, 输入命令:show variables like "max_connections&q ...

  3. STM8硬件设计注意事项

    1.中断 STM8的外部中断和STM32不一样,每个端口PX只有1个中断 2.ADC 1)Additional AIN12 analog input is not selectable in ADC ...

  4. [FILE API]利用Javascript上传图片

    1.HTML结构 <label for="file-input">File:</label> <input type="file" ...

  5. IronPython C#与Python相互调用

    ironphy  microsoft.scripting dll using System;using System.Collections.Generic;using System.Linq;usi ...

  6. github 配置ssh

    https://www.cnblogs.com/superGG1990/p/6844952.html

  7. Python星号表达式提取数据

    def drop_first_last(grades): first,*middle,last=grades return middle 这段代码的作用是grades中的元素,第一个和最后一个分别被提 ...

  8. Windows服务 --- SqlDependency的使用

    1   启用当前数据库的 SQL Server Service Broker a   检查Service Broker 是否开启 SELECT is_broker_enabled FROM sys.d ...

  9. python--闭包函数、装饰器

    先来点补充. x= def foo(): print(x) x= foo() 结果: x= def foo(): global x x= print(x) foo() print(x) 结果: x= ...

  10. Mybatis基于XML配置SQL映射器(二)

    Mybatis之XML注解 之前已经讲到通过 mybatis-generator 生成mapper映射接口和相关的映射配置文件: 下面我们将详细的讲解具体内容 首先我们新建映射接口文档  sysUse ...