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. pychrm和linux进行链接上传代码

    众享周知:现在在windows文件中我们有pycharm工具帮我们去编辑python脚本,这会省去我们大把的时间让我们进行更多的脚本编辑.有这样的一种方法,我们可以使用pycharm编辑的脚本上传到l ...

  2. Python之执行精确的浮点数运算

    有时候:代码上数字计算可能会有如同下面的误差 原因: 这些错误是由底层CPU和IEEE 754标准通过自己的浮点单位去执行算术时的特征. 由于Python的浮点数据类型使用底层表示存储数据,因此你没办 ...

  3. Java数组遍历

    1.数组声明格式: 数据类型 [] 数组名 = new 数据类型[长度]: 数组长度一旦确定无法更改. 数组里的数据必须是相同类型或自动向上转型后兼容的类型 2.数组遍历 //一维数组 String ...

  4. WPFの触发器详解

    例子1 简单触发器Triggers——满足简答的条件,触发 <Window x:Class="Styles.SimpleTriggers" xmlns="http: ...

  5. 第5篇K8S创建资源的两种方式

      一.创建方式分类: 命令 vs 配置文件 Kubernetes 支持两种方式创建资源: 1.用 kubectl 命令直接创建,比如: kubectl run httpd-app --image=r ...

  6. Codeforces 961E - Tufurama 树状数组

    转自:https://blog.csdn.net/my_sunshine26/article/details/79831362 题目大意: i从1开始 基本思路: 完全没思路,所以上来就二分,果不其然 ...

  7. 07.interrupt

    /** *isInterrupted */ public class InterruptDemo { public static void main(String[] args) throws Int ...

  8. java开源项目

    原文地址:http://blog.longjiazuo.com/archives/2625 1.整理出一些使用比较广或者个人觉得比较好的java开源项目和资料供参考.2.如果你觉得好但是我没有列出的开 ...

  9. 03-树2 List Leaves(25 分)

    Given a tree, you are supposed to list all the leaves in the order of top down, and left to right. I ...

  10. centos下mysql密码修改与远程连接

    之前的服务器,好久没上去过了,今天上去,密码居然又忘了... 要修改mysql的登陆密码,首先要设置 #vim /etc/my.cnf 在[mysqld] 下面加上一句 skip-grant-tabl ...