Question

在我的Ionic 2应用程序中，我有一个带有项目的网格组件，它们可以垂直滚动。

问题是在具有软导航栏的Android设备中（包含在屏幕中）滚动在整个内容显示之前停止（参见屏幕底部）。

Android Nexus 5的示例屏幕截图（带有软底导航栏）：

iPhone 7的示例屏幕截图（不带软底导航栏）：

我的问题是：如何检测软导航栏的高度（如果存在），以便我可以将其添加到网格的底部填充？

Answer 1

尝试使用Cordova Fullscreen Plugin或在配置文件中添加以下设置

provider "aws" {
  access_key = "${var.access_key}"
  secret_key = "${var.secret_key}"
  region     = "${var.region}"
}

resource "aws_instance" "example" {
  ami           = "${lookup(var.amis, var.region)}"
  instance_type = "t2.micro"

  tags {
    Name = "newprovisionerstest"
  }

  provisioner "local-exec" {
    command = "echo ${aws_instance.example.public_ip} > ip_address.txt"
  }
}

output "ip" {
  value = "${aws_eip.ip.public_ip}"
}

Answer 2

<强>答案：

我们可以使用全局screen对象来获取整个屏幕的尺寸，使用普通platform.height()来获取窗口的尺寸（没有软导航栏的高度）。

示例方法：

/**
   * On some Android devices there is a soft navigation bar,
   * which overlaps with the screen.
   * For that reason, we need to compute an extra space for
   * the drawer so that the items in the last
   * row are not shown "behind" the navigation bar
   * @returns {number} the difference in pixels.
   */
  getMarginBottomPropertyForDrawer() {
    const difference = screen.height - this.platform.height();
    return difference;
  }

Answer 3

在其他人遇到此问题时，请添加到Paul的答案中：

您可以使用原始答案获取软导航栏的高度，然后将其作为CSS变量注入并直接以您的样式使用：

  ngOnInit(){

    this.platform.ready().then(() => {
      this.checkSoftButton();
    });
  }


  private checkSoftButton(){
    const softButton=(screen.height - this.platform.height());
    const body:any=document.querySelectorAll('body');
    body.forEach((e:any)=>{
      e.classList.add('soft-button');
      e.style= '--ion-soft-button:' + softButton + 'px';
    });
  }

您可以在第一个组件中执行一次此操作，然后以类似

的样式使用它

  height:calc(100% - var(--ion-soft-button));

或

  height:calc(100vh - var(--ion-soft-button));

如果有一个软按钮，甚至需要在应用程序内执行其他操作，甚至可以使用添加到主体的软按钮类。

Answer 4

另一种解决方案如下：

document.addEventListener('deviceready', () => {
    var initialHeight = document.documentElement.clientHeight;
    window.addEventListener('resize', resizeFunction);
    function resizeFunction() {
        console.log('STATUS BAR HEIGHT', document.documentElement.clientHeight - initialHeight);
        window.removeEventListener('resize', resizeFunction);
    }
    StatusBar.overlaysWebView(true);
});

从 deviceready 开始大约需要 150 毫秒，您可以通过将 SplashScreen 显示更长的时间来“隐藏”它 :)

在Ionic 2中检测Android软导航栏高度

4 个答案: