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仍然存在,需要隐藏。具体做法如下:
- 安装Keyboard插件
ionic cordova plugin add ionic-plugin-keyboard
npm install --save @ionic-native/keyboard
- app.module.ts 中
import { Keyboard } from '@ionic-native/keyboard';
...
providers:[Keyboard]
- 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');
}
}
- 使用界面设置
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初学者的小项目