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

时间：2023-12-31 00:01:26

刚接触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 的坑真是不少。

相关文章