Ionic3.0 输入状态时隐藏Tabs栏

刚接触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 的值怎么都赋值 不成功，最后不得不FQ找了下。发现一个方法人家是在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', '0')
    });
    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 的坑真是不少。

转载于:https://www.cnblogs.com/wupeng88/p/7800686.html