找回密码
 立即注册
搜索

如何获取快应用标题栏的高度

1
回复
1142
查看
[复制链接]

63

主题

68

帖子

655

积分

 楼主| 2022-2-25 15:01:28 来自手机 显示全部楼层 |阅读模式
有什么办法吗
回复

使用道具 举报

11

主题

124

帖子

675

积分

2022-2-28 10:47:21 显示全部楼层
可以通过device.getInfo(OBJECT)接口获取设备信息,然后根据公式计算:标题栏高度=屏幕的高度-可使用窗口高度-状态栏高度,
即titleBarHeight= screenHeight-windowHeight-statusBarHeight。
screenHeight和windowHeight的计算方式参见“screenHeight和windowHeight的高度分别指什么https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-faq-0000001129279483#section1621213361175”。
注意:使用上述公式计算时,不能开启沉浸式状态栏,否则计算数据有误。即statusBarImmersive字段不能设置为true。
<template>
  <div class="container">
    <text>标题栏高度:</text>
    <text style="background-color: #7cfc00;">{{ this.titieBarHeight }}</text>
  </div>
</template>
<style>
  .container {
    width: 350px;
    height: 250px;
  }
</style>
<script>
  import device from "@system.device";
  export default {
    data: {
      titieBarHeight: ""
    },
    onInit() {
      this.$page.setTitleBar({ text: "获取标题栏高度", backgroundColor: "#7cfc00" });
      this.$page.setStatusBar({ backgroundColor: "#8b0000" });
    },
    onShow: function () {
      var that = this;
      device.getInfo({
        success: function (ret) {
          console.log("屏幕的高度=" + ret.screenHeight);
          console.log("状态栏高度=" + ret.statusBarHeight);
          console.log("可使用窗口高度=" + ret.windowHeight);
          console.log("屏幕密度=" + ret.screenDensity);
          console.log("标题栏高度=" + (ret.screenHeight - ret.statusBarHeight - ret.windowHeight));
          that.titieBarHeight = ret.screenHeight - ret.statusBarHeight - ret.windowHeight;
        }
      });
    }
  };
</script>


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册