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并发编程之美-阅读记录10

    同步器 10.1CountDownLatch 在开发过程中经常会遇到在主线程中开启多个子线程去并行执行任务,并且主线程需要等待子线程执行完毕后在进行汇总.在CountDownLatch出现之前使用线程 ...

  2. js 页面跳转 新窗口打开

    页面跳转:Window.showModalDialog(url,width,height); 弹出一个html文档的模式对话框Parent.window.document.location.href ...

  3. Springboot整合Hikari数据库连接池,密码加密

    1.application.yml配置 spring: datasource: jdbcUrl: jdbc:mysql://127.0.0.1:3306/jby?serverTimezone=UTC& ...

  4. C#编程—第五天--循环语句for

    for穷举法.迭代法 穷举法练习: //穷举法: //1.找100以内的与7有关的数 //2.小明单位发了一百元的购物卡,他到超市买洗化用品,一是洗发水(15元),二是香皂(2元),三是牙刷(5元)怎 ...

  5. 2019牛客暑期多校训练营(第三场)I Median

    题意:给出n-2的中位数序列b,b[i]代表原序列中(a[i],a[i+1],a[i+2])的中位数,求a. 解法:比赛的时候没做出来,赛后看题解的.解法跟网上各位大佬一样:首先要证明其实原序列a中的 ...

  6. 最大流的EK算法模板

    模板题:洛谷p3376 题目大意: 给出一个网络图,以及其源点和汇点,求出其网络最大流. 基本思路: 套模板 EK的时间复杂度O(V*E^2) EK算法思路: 1.通过BFS拓展合法节点(每个节点在本 ...

  7. laravel 跨域解决方案

    我们在用 laravel 进行开发的时候,特别是前后端完全分离的时候,由于前端项目运行在自己机器的指定端口(也可能是其他人的机器) , 例如 localhost:8000 , 而 laravel 程序 ...

  8. python--MySql 表记录的操作

    表记录的增删改查 ---插入表记录 全列插入:insert into 表名 values(...) 缺省插入:insert into 表名(列1,...) values(值1,...) -- 插入一条 ...

  9. CF 1150 D Three Religions——序列自动机优化DP

    题目:http://codeforces.com/contest/1150/problem/D 老是想着枚举当前在给定字符串的哪个位置,以此来转移. 所以想对三个串分别建 trie 树,然后求出三个t ...

  10. Least Common Ancestors

    /* Least Common Ancestors * Au: Small_Ash */ #include <bits/stdc++.h> using namespace std; con ...