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 ...
随机推荐
- cygwin的用途
cgywin简介 打开cygwin的官方网站(www.cygwin.com),一行英文非常醒目:Get that Linux feeling – on Windows! 简而言之,cygwin是一个在 ...
- kubernetes容器集群管理部署master节点组件
集群部署获取k8s二进制包 [root@master ~]# wget https://dl.k8s.io/v1.15.0/kubernetes-server-linux-amd64.tar.gz [ ...
- python实现发送文本邮件
简单实现了python发送文本邮件 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/4/25 17:09 # @Author ...
- 不修改源代码,动态注入Java代码的方法(转)
转自:https://blog.csdn.net/hiphoon_sun/article/details/38707927 有时,我们需要在不修改源代码的前提下往一个第三方的JAVA程序里注入自己的代 ...
- 二、Redis启动、停止、Redis命令行的操作
1.redis命令 redis执行了make install后,redis的课执行文件都会自动复制到 /usr/local/bin 目录 redis-server redis服务器 redis-cli ...
- 配置node 的路由
配置路由 引入路由中间件 const Router= require('koa-router'); 实例化 const router= new Router(); 配置路由地址 router.use( ...
- SpringMvc返回给前端数据@ResponseBody响应体【支持Ajax】
1).在Controller中写 //@ResponseBody响应体是jackson包提供的 用于将Controller的方法返回的对象,通过HttpMessageConverter接口转换为指定格 ...
- 解决handsontable日期控件汉化的问题
在项目的 node_modules\pikaday目录下打开 pikaday.js 把 i18n: { previousMonth : 'Previous Month', nextMonth : 'N ...
- SLA(服务等级协议)
SLA:Service-Level Agreement的缩写,意思是服务等级协议.是关于网络服务供应商和客户间的一份合同,其中定义了服务类型.服务质量和客户付款等术语. 定义SLA:Service-L ...
- 【从0到1,搭建Spring Boot+RESTful API+Shiro+Mybatis+SQLServer权限系统】04、统一处理异常
本节讨论如何使用Spring的异常处理机制,当我们程序出现错误时,以相同的一种格式,把错误信息返回给客户端 1.创建一些自定义异常 public class TipsException extends ...