css – 在特定子页面上隐藏Ionic TabBar(IONIC 3)

前端之家收集整理的这篇文章主要介绍了css – 在特定子页面上隐藏Ionic TabBar(IONIC 3)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我想在多个特定页面上隐藏我的tabbar.我的主要重点是将其隐藏在我的登录页面,注册页面评论页面上.我已经尝试过tabsHideOnSubPages:true,但当我这样做时,我的UserProfile页面
(这是一个子页面)隐藏了标签栏.标签栏也必须在UserProfile页面上可见,但在我之前提到的子页面(登录,注册等等)上也不会显示.

我目前正在使用Ionic Framework:ionic-angular 3.2.0

有谁知道我怎么解决这个问题?

最佳答案
我可以给你一个快速的修补程序.

将此代码复制到您的.ts页面文件中.
功能将在页面加载时执行.

如果要隐藏tabbar,请执行以下代码行:

tabs[key].style.display = 'none';

如果你想显示它,只需将’none’更改为’flex’即可使用此代码.

tabs[key].style.display = 'flex';

这段代码是一个角度函数,基本上意味着它在页面加载时执行.

ngAfterViewInit()

完整代码

ngAfterViewInit() {
    let tabs = document.querySelectorAll('.show-tabbar');
    if (tabs !== null) {
        Object.keys(tabs).map((key) => {
            tabs[key].style.display = 'none';
        });
    }
}

如果您离开页面,也可以使用此代码再次显示标签栏.

    ionViewWillLeave() {
        let tabs = document.querySelectorAll('.show-tabbar');
        if (tabs !== null) {
            Object.keys(tabs).map((key) => {
                tabs[key].style.display = 'flex';
            });

        }
}

希望这能帮到你.

猜你在找的CSS相关文章