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 的值怎么都賦值 不成功，最后不得不翻牆找了下。發現一個方法人家是在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 的坑真是不少。