java 开发 网站网站建设技术

背景描述

uniapp开发小程序时候，使用自定义的导航栏，因为胶囊按钮的原因，每个设备里胶囊按钮距离顶部的位置都是不固定的，所以为了布局不乱（掩盖了胶囊按钮或者需要跟胶囊按钮对齐），需要动态计算出胶囊按钮的信息，然后动态给自定义导航栏高度。

步骤

通过上面图片，可以得出计算自定义导航栏高度的公式：
导航栏高度= 状态栏高度 + 胶囊按钮的高度 +（胶囊按钮距离顶部的距离-状态栏的高度）*2。

  <!-- 自定义导航栏组件 --><view class="customNavigationBar" :style="{height: customNavigationBarHeight+'px'}"</view>

import {ref} from 'vue'
/*
数据
*/
const title=ref('Hello Vue3！！！')
let customNavigationBarHeight = ref(0)// 动态设置自定义导航栏高度
// 获取状态栏的高度
const statusBarHeight = uni.getWindowInfo().statusBarHeight
// 获取胶囊按钮的高度
const menuButtonHeight = uni.getMenuButtonBoundingClientRect().height
// 获取胶囊按钮的top
const menuButtonTop = uni.getMenuButtonBoundingClientRect().top
customNavigationBarHeight.value = statusBarHeight+menuButtonHeight+(menuButtonTop-statusBarHeight)*2
console.log('@',customNavigationBarHeight.value)

大功告成