根据屏幕方向隐藏Ionic Framework Header [英] Hiding the Ionic Framework Header based on screen orientation

问题描述

我想问一下，当屏幕方向从纵向更改为横向时，是否有办法在特定视图中隐藏离子框架的导航栏。

I would like to ask if there is a way to hide a nav bar of the ionic framework on a particular view upon changing in the screen orientation from portrait to landscape.

推荐答案

是的，你可以，这很容易。

Yes you can, it's very easy.

这是你需要触发隐藏导航栏的功能：

This is a function you need to trigger to hide a navbar:

$ionicNavBarDelegate.showBar(false); 

当然，请在适当的控制器内进行。

Of course, do it inside an appropriate Controller.

此公式的第二部分是Cordova Orientation插件，单击 此处 。

The second part of this formula is Cordova Orientation plugin, click here.

因此，如果合并，您会想要这样的内容：

So when combined you would want something like this:

if(screen.orientation == 'landscape') {
    $ionicNavBarDelegate.showBar(false); 
}

还有一种用于检测方向的JavaScript方法，但它很受欢迎某些设备的解决方案。 Cordova插件是一个更安全的解决方案。

There's also a JavaScript approach to detect an orientation, but it's a hit and miss solution on some devices. Cordova plugin i much safer solution.

这不是一切，如果用户在视图初始化后改变方向怎么办：

This is not everything, what if user change orientation after view initialization:

window.addEventListener('orientationchange', doOnOrientationChange);

// Initial execution if needed
doOnOrientationChange();

function doOnOrientationChange()
{
    if(screen.orientation == 'landscape') {
        $ionicNavBarDelegate.showBar(false); 
    }        
}

这篇关于根据屏幕方向隐藏Ionic Framework Header的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！