ionic V3.10 开发踩坑集锦(三)

2,269 阅读2分钟

GitHub地址:https://github.com/JerryMissTom ,欢迎关注

这是ionic 开发踩坑的第三篇文章,前两篇参见:ionic V3.10 开发踩坑集锦(一)ionic V3.10 开发踩坑集锦(二) 开发环境与上文保持一致。

从Tab界面跳转到Login界面并隐藏Tab

我们的APP主页使用最常见的底部 Tab,设置界面中退出登录会跳转到 Login 界面。一开始使用的是 NavController.setRoot(); ,然后Login 界面中 Tab 会展示出来,使用其他手段隐藏 Tab ,但是不优雅。后来查询到一个很好的方法,如下:

import { App } from 'ionic-angular/components/app/app';

 constructor(
    private app: App
  ) 

toLoginPage(){
     this.app.getRootNavs()[0].setRoot(LoginPage);
     // 需要注意的是网上最常见的是下面的写法,但是getRootNav方法被废弃掉
     // this.app.getRootNav().setRoot(LoginPage);
}

在Tab界面中输入法唤起时隐藏Tab

Tab的一个界面中有input输入框,当输入文字唤起输入法的时候,tab仍然存在,需要隐藏。具体做法如下:

  1. 安装Keyboard插件
ionic cordova plugin add ionic-plugin-keyboard
npm install --save @ionic-native/keyboard
  1. app.module.ts 中
import { Keyboard } from '@ionic-native/keyboard';
...
providers:[Keyboard]
  1. tab设置
tab.html
<ion-tabs #myTabs>
  ...
</ion-tabs>
tab.ts
import { Component, ElementRef, Renderer, ViewChild } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard';
import { Events, Tabs } from 'ionic-angular';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  @ViewChild('myTabs') tabRef: Tabs;
  mb: any;
  
  constructor(private elementRef: ElementRef,
    private renderer: Renderer,
    private keyboard: Keyboard,
    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);
  }

    // 一定记得要取消订阅,网上很多没写这个,会带来隐藏的Bug
  ionViewWillUnload() {
    this.event.unsubscribe('hideTabs');
    this.event.unsubscribe('showTabs');
  }
}
  1. 使用界面设置
about.ts
import { Subscription } from 'rxjs/Subscription';
import { Keyboard } from '@ionic-native/keyboard';
...
export class About {
  private hideSubscription: Subscription;
  private showSubscription: Subscription;
  
  construct(
  private keyboard: Keyboard,
  private event: Events
  ){
      this.hideSubscription = null;
      this.showSubscription = null;
  }
  
   ionViewDidEnter() {
    this.hideSubscription = this.keyboard.onKeyboardShow().subscribe(() => this.event.publish('hideTabs'));
    this.showSubscription = this.keyboard.onKeyboardHide().subscribe(() => this.event.publish('showTabs'));
  }
  
  ionViewWillLeave() {
    this.keyboard.close();
    if (this.hideSubscription) {
      this.hideSubscription.unsubscribe();
      this.hideSubscription = null;
    }
    if (this.showSubscription) {
      this.showSubscription.unsubscribe();
      this.showSubscription = null;
    }
  }

ionic 界面的生命周期

ionViewDidLoad 只在界面创建的时候执行一次,假如此界面被缓存,重新进入后,不会被触发,可用于一些数据的初始化或赋值。

ionViewDidEnter 只要在界面变为 active 时候就触发一次,不管此界面是第一创建还是从缓存中获取。可用于每次进入界面中的网络刷新。

ionViewWillLeave 在界面将要消失,不再 active 的时候触发。

ionViewWillUnload 在界面将被 destroy 掉,不再存在时候触发,这个时候可以执行取消订阅事件。

ionViewCanEnter 在界面进入之前判断是否满足条件或权限

ionViewCanLeave 在界面离开之前判断是否满足条件或权限

推荐

最后推荐下我写的ionic的小项目,具体可以参见 适合ionic初学者的小项目