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. mysql常见的hint

    mysql常用的hint对于经常使用oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法.同样,在mysql里,也有类似的hint功能.下面介绍一些常用的. ...

  2. 在tkinter中使用matplotlib

    import sys import tkinter as Tk import matplotlib from numpy import arange, sin, pi from matplotlib. ...

  3. 61.Merge k Sorted Lists(合并k个排序链表)

    Level:   Hard 题目描述: Merge k sorted linked lists and return it as one sorted list. Analyze and descri ...

  4. ubuntu16.04安装docker11.09

    1.    安装Docker 操作系统 ubuntu16.04 1.1.   配置源文件 $sudo apt-get update #允许 apt 命令 HTTPS 访问 Docker 源 $sudo ...

  5. webpack + vue 打包生成公共配置文件(域名) 方便动态修改

    需求原因 原来的项目中域名是打包到项目里面的,打包后不能动态配置,只能通过不同的指令打包来切换域名,每天都在测试域名和正式域名来回摩擦,后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配 ...

  6. 2019年React学习路线图

    作者|javinpaul 译者|无明 之前我们已经介绍了 2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了飞越式的发展,我们 ...

  7. nodejs npm 常用配置

    npm install moduleNames : 安装 Node 模块.node安装分为全局模式和本地模式. npm install -g moduleName.npm install expres ...

  8. Django 与 Flask框架的比较

    Django Django恐怕是最有代表性的Python框架了.它是一个遵循MMVC架构模式的开源框架.它的名字来自Django Reinhardt,一个法国作曲家和吉他演奏家,很多人认为他是历史上最 ...

  9. SPI驱动程序设计

    一.SPI驱动子系统架构 m25p80.c: static int __devinit m25p_probe(struct spi_device *spi) { struct flash_platfo ...

  10. Python基础教程(010)--第一个程序Hello Python

    前言 会编写Hello Python源程序 内容 1,在桌面下,新建Python目录 2,在认识的Python目录下,新建一个HelloPython的文件 linux下: touch HellPyth ...