美文网首页
ionic使用tabsHideOnSubPages偶尔会无效

ionic使用tabsHideOnSubPages偶尔会无效

作者: ETXIN | 来源:发表于2018-06-15 11:32 被阅读0次

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));

目前使用的是方案二+方案一,较符合项目需求,暂未发现问题。

相关文章

网友评论

      本文标题:ionic使用tabsHideOnSubPages偶尔会无效

      本文链接:https://www.haomeiwen.com/subject/jqypeftx.html