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、完成收工。

转载于:https://www.cnblogs.com/hsl-shiliang/p/8150636.html

ionic3 动态设置tabs页面底部导航栏隐藏，并显示输入框添加评论相关推荐

android底部导航栏带消息数的框架,GitHub - BarkSheep/Android-NavMenuLayout: 一个底部导航栏, 实现了显示未读消息数, 显示红点等效果的封装...
Android-NavMenu-master 一个底部导航栏, 实现了显示未读消息数, 显示红点等效果的封装. 添加依赖 1. 在项目根目录的 build.gradle 中添加 allprojects ...
iOS 导航栏隐藏和显示
1: 导航栏隐藏.显示之间跳转 iOS 导航栏对于隐藏造成的动画可以通过在 viewWillAppear 和 viewWillDisappear 来设置完成 - (void)viewWillAppe ...
Android 设置应用的底部导航栏(虚拟按键)背景颜色
对于有些Android手机的底部虚拟键,进行设置颜色,其实很简单,利用系统提供的Api一步代码就可以搞定,只支持Android5.0以上的系统 //设置底部导航栏颜色if (Build.VERSION ...
android 虚拟键背景,Android 设置应用的底部导航栏(虚拟按键)背景颜色
Android手机机型种类繁多,但是虚拟按键也就是底部的导航栏,不外乎两种设计方式,一种是作为虚拟按键设计到屏幕内部,一种是作为系统按键设计到屏幕外面. 对于按键在屏幕内部的机型,因为虚拟按键也是屏幕 ...
html页面缩小导航栏隐藏,HTML页面中如何隐藏导航栏
满意答案 stmgwzmf 推荐于 2016.05.04 采纳率:56% 等级:11 已帮助:4248人可以用JS实现 function showsubmenu(sid){ whichEl = ...
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )
文章目录一.Scaffold 组件二.底部导航栏整体架构三.BottomNavigationBar 底部导航栏四.BottomNavigationBarItem 导航栏条目五.PageVie ...
【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
文章目录一.BottomNavigationBar 组件二.BottomNavigationBarItem 组件三.BottomNavigationBar 底部导航栏代码示例四.BottomN ...
Flutter仿闲鱼底部导航栏实现
概述本文主要实现一个仿闲鱼底部导航栏实现,这种效果在项目中经常用到,接下来我们就从头开始实现. 仿闲鱼底部导航栏要实现闲鱼底部导航栏的效果我们需要使用到BottomNavigationBar和Fl ...
底部导航栏的凸起效果
微信小程序开发教程.开发教学本视频为1-1号视频,做出了底部导航栏的凸起效果第一次做视频,希望大家多多支持- 组件源码+项目源码: 链接:https://pan.baidu.com/s/1EkZx ...

ionic3 动态设置tabs页面底部导航栏隐藏，并显示输入框添加评论

ionic3 动态设置tabs页面底部导航栏隐藏，并显示输入框添加评论相关推荐

最新文章

热门文章