小程序自定义顶部导航栏计算高度

定义函数

// 计算自定义导航栏高度.
function calNavigationBarHeight() {
  const statusInfo = uni.getSystemInfoSync()
  const ClientRect = uni.getMenuButtonBoundingClientRect()
  //手机状态栏的高度 statusInfo.statusBarHeight
  //安全区域左上角纵坐标   ClientRect.top
  //安全区域的高度，单位逻辑像素   ClientRect.height
  let custonHeight = ((ClientRect.top - statusInfo.statusBarHeight) * 2 + ClientRect.height + statusInfo
    .statusBarHeight) * 2

  console.log(statusInfo, ClientRect, ClientRect.top - statusInfo.statusBarHeight, "状态栏")
  uni.setStorageSync('custonHeight', custonHeight)

  return custonHeight
}


export{
  calNavigationBarHeight
}

ClientRect.top-statusInfo.statusBarHeight可以得到右侧胶囊与状态栏之间的间距,乘以2再加上胶囊高度就是底部这块区域的高度,加上statusInfo.statusBarHeight手机状态栏的高度就是自定义导航栏的高度,单位是px 乘以2,单位是rpx

使用

    <view :style="{height:`${navigationHeight}rpx`,lineHeight:`${navigationHeight+80}rpx`,backgroundColor:bgColor}" class="top_status">
      <text>{{title}}</text>
    </view>

 created() {
      let height=calNavigationBarHeight()
      console.log(height,"height");
      this.$u.vuex("navigationHeight", height);
    },