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="nav-box-title">
        <uni-icons type="left" size="25" class="ss-m-l-20" color="#0E100F" @tap="goBack"></uni-icons>
        <view class="title-text" :class="[{'text-left': textLeft}, {'text-center': !textLeft}]">{{ title }}</view>
      </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)
  }
})

const goBack = () => {
  uni.navigateBack({
    delta: 1
  });
}
</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;
    }
  }
}
.nav-box-title {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  .title-text {
    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: 33rpx;
}
</style>