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