刚接触ionic3 不久 ,发现遍地都是坑,昨天遇到一个问题就是当键盘弹起的时候tabs 也被 弹了起来,最初预想是放在tabs 的一个子页面内处理这个问题,

Tabs隐藏后,我们发现底部有部分空白,是因为ion-content编译后,实际内容显示于一个class为scroll-content的div,而这个div有一个“margin-bottom: 53px”的样式。

<div class="scroll-content" style="margin-top: 44px;margin-bottom: 53px;"></div>

需要修改margin-bottom 的值为0才可以,可是在tabs 的friends .ts 处理发现margin 的值怎么都赋值 不成功,最后不得不翻墙找了下。发现一个方法人家是在tabs.ts内处理的。直接贴代码

tabs.ts

import { Component, ElementRef, Renderer, ViewChild } from '@angular/core';
import { Events, Tabs } from 'ionic-angular';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
@ViewChild('myTabs') tabRef: Tabs;
mb: any;
tab1Root = HomePage;
tab2Root = AboutPage;
tab3Root = ContactPage;
constructor(private elementRef: ElementRef, private renderer: Renderer, private event: Events) {
}
ionViewDidLoad() {
let tabs = this.queryElement(this.elementRef.nativeElement, '.tabbar');
this.event.subscribe('hideTabs', () => {
this.renderer.setElementStyle(tabs, 'display', 'none');
let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
let content = this.queryElement(SelectTab, '.scroll-content');
this.mb = content.style['margin-bottom'];
this.renderer.setElementStyle(content, 'margin-bottom', '')
});
this.event.subscribe('showTabs', () => {
this.renderer.setElementStyle(tabs, 'display', '');
let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
let content = this.queryElement(SelectTab, '.scroll-content');
this.renderer.setElementStyle(content, 'margin-bottom', this.mb)
})
}
queryElement(elem: HTMLElement, q: string): HTMLElement {
return <HTMLElement>elem.querySelector(q);
}
}

friends.ts

ionViewDidLoad() {
// let qq= document.getElementsByClassName('show-tabbar')[0].setAttribute('style','bottom: 0;display: none;');
// console.log(qq);
this.keyboard.onKeyboardShow().subscribe(() => this.event.publish('hideTabs'));
this.keyboard.onKeyboardHide().subscribe(() => this.event.publish('showTabs'));
console.log('ionViewDidLoad FriendsPage');
}

经过以上步骤,问题解决。ionic3 的坑真是不少。

Ionic3.0 输入状态时隐藏Tabs栏的更多相关文章

  1. uwp - 上滑隐藏导航栏下滑显示

    原文:uwp - 上滑隐藏导航栏下滑显示 好久没写博客了,因为忙着工作.昨天周末填坑需要做一个上滑列表数据时隐藏导航栏下滑时显示的效果,下面分享一下我的做法,希望能给你带来帮助. 思路是通过判断滚动条 ...

  2. Android 弹出Dialog时隐藏状态栏和底部导航栏

    上代码 dialog.getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION); di ...

  3. iframe的滚动栏问题:显示/隐藏滚动栏

    iframe 问题2008-01-22 16:37******   显示 iframe 内容 XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLI ...

  4. C++隐藏任务栏图标

    在VC编程中,有时候我们需要将我们的程序在任务栏上的显示隐藏起来,我试过几种方法,下面我介绍一下我知道的三种方法. 第一种方法是设置窗口WS_EX_TOOLWINDOW扩展样式,通过在OnInitDi ...

  5. iOS 滑动隐藏导航栏-三种方式

    /** 1隐藏导航栏-简单- */    self.navigationController.hidesBarsOnSwipe = YES; /** 2隐藏导航栏-不随tableView滑动消失效果 ...

  6. easyui-tabs图标(获取焦点时显示图标,失去焦点时隐藏图标)

    获取焦点时显示图标,失去焦点时隐藏图标 <script type="text/javascript"> $('#_progress').tabs({ onSelect: ...

  7. win下隐藏任务栏

    C# 隐藏任务栏开始按钮 关闭shell 分类: .NET C# 2011-07-14 15:26 789人阅读 评论(1) 收藏 举报 shell任务c#stringnulluser 一.隐藏任务栏 ...

  8. 安卓ROOT后禁用/隐藏导航栏/虚拟按键

    安卓ROOT后禁用/隐藏导航栏/虚拟按键 提醒:提前装好EASY TOUCH 等类似工具. 用ROOT EXPLORER 或 ROOT BROWSER system\bulid.prop 最后加一行: ...

  9. [WPF疑难]避免窗口最大化时遮盖任务栏

    原文 [WPF疑难]避免窗口最大化时遮盖任务栏 [WPF疑难]避免窗口最大化时遮盖任务栏 周银辉 WPF窗口最大化时有个很不好的现象是:如果窗口的WindowStyle被直接或间接地设置为None后( ...

随机推荐

  1. 第26月第20天 springboot

    --------------------- 1.pom.xml中添加支持web的模块: <dependency> <groupId>org.springframework.bo ...

  2. python网络编程初识

    一,什么是计算机网络: 计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在网络操作系统,网络管理软件及网络通信协议的管理和协调下,实现资源共享和 [1]  信 ...

  3. php 调试的常用方法

    1. php 页面直接输出错误, 根据错误进行调试 2.无法通过php页面捕获到错误,通过查看apache2的日志错误进行排查,  像通过系统命令进行操作失败时,就需要日志进行查看

  4. 新语法11. – LINQ

    LINQ分组: IEnumerable<IGrouping< group dog by dog.Age; 遍历分组: foreach (IGrouping<int, Dog> ...

  5. 中国各省市县级 JSON 文件

    参考链接:https://blog.csdn.net/lzhlzz/article/details/41347929

  6. 51nod 1437 迈克步 单调栈

    利用单调栈高效的求出,一个数a[i]在哪个区间内可作为最小值存在. 正向扫描,求出a[i]可做为最小值的区间的左边界 反向扫描,求出a[i]可作为最小值的区间的右边界 r[i] - l[i] +1 就 ...

  7. 2017-2018-2 20165237 实验三《 敏捷开发与XP实践》实验报告

    2017-2018-2 20165237 实验三< 敏捷开发与XP实践>实验报告 实验报告表头: 知识点: 1.XP团队使用现场客户.特殊计划方法和持续测试来提供快速的反馈和全面的交流: ...

  8. CSS函数

    布局时发现CSS居然能进行计算,cale()函数用于动态计算长度值 html,body的height为100%,黑框浮动width为200px,橙框处标准流,由于浮动最初目的是为了实现文字环绕,所以文 ...

  9. webrtc学习笔记

    获取笔记本摄像头视频流 <html> <meta http-equiv="Content-Type" content="text/html; chars ...

  10. kali2.0的初始设置

    1.修改源 leafpad /etc/apt/sources.list 加kali源 deb http://http.kali.org/kali kali-rolling main non-free ...