在 ion-tabs 设置了 tabsHideOnSubPages 的情况下,在子页面刷新后偶尔会再次显示tabs。
源码:https://github.com/ionic-team/ionic/blob/v3/src/components/tabs/tab.ts
_viewAttachToDOM(viewCtrl: ViewController, componentRef: ComponentRef<any>, viewport: ViewContainerRef) {
const isTabSubPage = (this._tabsHideOnSubPages && viewCtrl.index > 0);
if (isTabSubPage) {
viewport = this.parent.portal;
}
super._viewAttachToDOM(viewCtrl, componentRef, viewport);
if (isTabSubPage) {
// add the .tab-subpage css class to tabs pages that should act like subpages
const pageEleRef = viewCtrl.pageRef();
if (pageEleRef) {
this._renderer.setElementClass(pageEleRef.nativeElement, 'tab-subpage', true);
}
}
}
查看源码得知,ionic判断子页面的逻辑是:在路由历史中,当前页面的index大于0则为子页面。
如果子页面的 @IonicPage 中没有设置 defaultHistory ,ionic将会判断此页面的index为0,就会出现刷新子页面后再次显示tabs的问题。
一般情况下子页面是要设置 defaultHistory 的,但是 defaultHistory 目前不支持传递参数,所以在某些情况下,可能子页面不设置 defaultHistory。
下面提供两种解决方法:
解决方案一
将子页面的 defaultHistory 设置为主页(home),或者是当前tab的根页面(在 ion-tab 设置的 root)。
解决方案二
如果子页面可能在不同的tab中被打开,无法确定其根页面的情况下,这时我们修改ionic判断子页面的逻辑即可。
判断当前页面是否为根页面,非根页面则隐藏tabs。
找到上面的源码,可以通过搜索 isTabSubPage 来定位。(修改ionic源码修复问题)
// fix,增加root判断
// js文件中记得使用var替代const、let
const isRoot = this.root === viewCtrl.id;
const isTabSubPage = (this._tabsHideOnSubPages && (!isRoot || viewCtrl.index > 0));
目前使用的是方案二+方案一,较符合项目需求,暂未发现问题。
网友评论