可以通过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>
|