当前位置：首页 > news >正文

uniapp开发微信小程序，根据胶囊按钮来自定义导航栏

news 来源：原创 2025/6/27 14:01:28

背景描述

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)