menduner-uniapp/components/Navbar/index.vue

<template>
  <view
    class="navbar"
    :class="{'gradientBgc': !noBgColor}"
    :style="{
      'height': (navbarHeight < defaultLogoHeight ? (defaultLogoHeight + 10) : navbarHeight + 10) + 'px',
      'line-height': (navbarHeight < defaultLogoHeight ? (defaultLogoHeight + 10) : navbarHeight + 10) + 'px',
    }"
  >
    <view class="navbar-box" :style="{'paddingTop': statusBarHeight + 'px'}">
      <image 
        v-if="showLogo" 
        src="https://minio.menduner.com/dev/fe9890be9b1176f84f2aa282b0f6adce300b133f65eb3d7b45ae057aa5698324.png" 
        class="navbar-box-logo" 
        :style="{'height': defaultLogoHeight + 'px'}"
      ></image>
      <view v-else class="navbar-box-title" :class="[{'text-left': textLeft}, {'text-center': !textLeft}]">{{ title }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

defineProps({
  title: {
    type: String,
    default: '门墩儿'
  },
  showLogo: {
    type: Boolean,
    default: false
  },
  // 是否需要渐变背景
  noBgColor: {
    type: Boolean,
    default: false
  },
  // 标题所在位置
  textLeft: {
	  type: Boolean,
	  default: true
  }
})

const defaultLogoHeight = 40
const navbarHeight = ref(0)
const statusBarHeight = ref(0)

onLoad(() => {
  try {
    const systemInfo = uni.getSystemInfoSync()
    statusBarHeight.value = systemInfo.statusBarHeight
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()

    // 计算导航栏高度
    navbarHeight.value = menuButtonInfo.height + 2 * (menuButtonInfo.top - statusBarHeight.value) + statusBarHeight.value

    // 确保导航栏高度不小于 logo 高度 + 10
    if (navbarHeight.value < defaultLogoHeight + 10) {
      navbarHeight.value = defaultLogoHeight + 10
    }

    // 将 navbarHeight 存入本地缓存
    const height = navbarHeight.value < defaultLogoHeight ? (defaultLogoHeight + 10) : navbarHeight.value + 10
    uni.setStorageSync('navbarHeight', height)
  } catch (error) {
    console.error('获取系统信息或菜单按钮信息时出错:', error)
  }
})
</script>

<style scoped lang="scss">
.gradientBgc {
  background: linear-gradient(180deg, #9bfece, #BCFEDE);
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  &-box {
    position: relative;
    width: 100%;
    height: 100%;
    &-logo {
      position: absolute;
      left: 10px;
      width: 95px;
    }
    &-title {
      position: absolute;
      width: 158px;
      height: 51px;
      line-height: 51px;
      color: #0E100F;
      font-style: normal;
      text-transform: none;
    }
  }
}
.text-left {
	left: 10px;
	font-family: MiSans-Semibold;
	font-weight: 600;
	font-size: 38rpx;
}
.text-center {
	left: 50%;
	transform: translateX(-50%);
	font-family: MiSans-Medium;
	font-size: 38rpx;
}
</style>