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. Docker 在 centos 7上升级

    Docker 在 centos 7上升级 狂暴的蚂蚁 关注 2017.05.22 10:49* 字数 194 阅读 3253评论 0喜欢 1 引子 如果有旧的Docker 先删除 旧Docker版本上 ...

  2. DataX简介

    DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL.Oracle.SqlServer.Postgre.HDFS.Hive.ADS.HBase.TableStore(O ...

  3. 2019-8-31-C#-遍历枚举

    title author date CreateTime categories C# 遍历枚举 lindexi 2019-08-31 16:55:58 +0800 2018-03-13 20:42:2 ...

  4. go语言从例子开始之Example6.if/else

    if 和 else 分支结构在 Go 中当然是直接了当的了. package main import "fmt" func main() { 这里是一个基本的例子. if 7%2 ...

  5. Linux 下安装sql server 时 2G内存限制的最新(2019-08-15) 解决方案

    关于 sqlserver 在linux下安装时有最小内存限制的问题,网上有很多类似的说明,那些操作都是正确的,如果不成功可能 “姿势”不对. 需要注意的是:不能使用最新版本!!!  不能在线下载!!! ...

  6. mangodb数据库

    阅读目录 一 简介 二 MongoDB基础知识 三 安装 四 基本数据类型 五 CRUD操作 六 可视化工具 七 pymongo 一 简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库1. ...

  7. paper 148: Face Databases

    持续更新ing~ 1.人脸检测数据库: (1999年发布)CMU+MIT:180幅图像,共734个人脸.包含3个正面人脸测试子集和一个旋转人脸测试子集,其中正面人脸测试子集有130幅图像,共511个人 ...

  8. [NOIP模拟测试37]反思+题解

    一定要分析清楚复杂度再打!!!窝再也不要花2h20min用暴力对拍暴力啦!!! 雨露均沾(滑稽),尽量避免孤注一掷.先把暴力分拿全再回来刚正解. 即使剩下的时间不多了也优先考虑认真读题+打暴力而非乱搞 ...

  9. python sum()函数的用法

    sum() 方法对系列进行求和计算.针对元组,列表.对字符串会报错 >>>sum([0,1,2]) 3 >>> sum((2, 3, 4), 1) # 元组计算总和 ...

  10. php 字符串 定界符 json_last_error()

    字符串的3种赋值 1:单引号 $str = '111111111111 '; 2:双引号 $str =" 11111111111 "; 3:定界符 $str = <<& ...