ionic3 动态设置tabs页面底部导航栏隐藏,并显示输入框添加评论
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页面底部导航栏隐藏,并显示输入框添加评论的更多相关文章
- 使用mui框架开发App,当input获取焦点时,键盘弹出,底部导航栏上升。
转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢 问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部 ...
- 小程序 - 底部导航栏“tabBar”
小程序底部导航 1.app.json页面配置: { "pages": [ "pages/movie/movie", "pages/cinema/cin ...
- uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据
h5端的uni-app项目 需求:uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据 百度的方法如下: uni.switchTab({ url: '/p ...
- Android_ViewPager+Fragment实现页面滑动和底部导航栏
1.Xml中底部导航栏由一个RadioGroup组成,其上是ViewPager. <?xml version="1.0" encoding="utf-8" ...
- TextView+Fragment实现底部导航栏
前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以 ...
- Android底部导航栏——FrameLayout + RadioGroup
原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6285881.html Android底部导航栏有多种实现方式,本文详细介绍FrameLayout ...
- TabHost实现底部导航栏
源代码及可执行文件下载地址:http://files.cnblogs.com/rainboy2010/tabnavigation.zip 现在很多Android应用界面都采用底部导航 ...
- 04-Flutter移动电商实战-打通底部导航栏
关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...
- Flutter——BottomNavigationBar组件(底部导航栏组件)
BottomNavigationBar常用的属性: 属性名 说明 items List<BottomNavigationBarItem> 底部导航条按钮集合 iconSize icon c ...
随机推荐
- java 调用DB2 SYSPROC.ADMIN_CMD存储过程导出数据
import java.sql.CallableStatement; import java.sql.Connection; import java.sql.DriverManager; import ...
- 更改mysql最大连接数
方法一: 打开cmd,用"mysql -u root -p;"命令进入mysql, 输入命令:show variables like "max_connections&q ...
- STM8硬件设计注意事项
1.中断 STM8的外部中断和STM32不一样,每个端口PX只有1个中断 2.ADC 1)Additional AIN12 analog input is not selectable in ADC ...
- [FILE API]利用Javascript上传图片
1.HTML结构 <label for="file-input">File:</label> <input type="file" ...
- IronPython C#与Python相互调用
ironphy microsoft.scripting dll using System;using System.Collections.Generic;using System.Linq;usi ...
- github 配置ssh
https://www.cnblogs.com/superGG1990/p/6844952.html
- Python星号表达式提取数据
def drop_first_last(grades): first,*middle,last=grades return middle 这段代码的作用是grades中的元素,第一个和最后一个分别被提 ...
- Windows服务 --- SqlDependency的使用
1 启用当前数据库的 SQL Server Service Broker a 检查Service Broker 是否开启 SELECT is_broker_enabled FROM sys.d ...
- python--闭包函数、装饰器
先来点补充. x= def foo(): print(x) x= foo() 结果: x= def foo(): global x x= print(x) foo() print(x) 结果: x= ...
- Mybatis基于XML配置SQL映射器(二)
Mybatis之XML注解 之前已经讲到通过 mybatis-generator 生成mapper映射接口和相关的映射配置文件: 下面我们将详细的讲解具体内容 首先我们新建映射接口文档 sysUse ...