ai_uniapp_v2/components/ai-nav-title/ai-nav-title.vue

<template>
  <view class="ai-nav-title">
    <view class="nav-fixed" :style="{ height: totalHeight + 'px' }">
      <text
        class="nav-title"
        :style="{
          top: titleTop + 'px',
          lineHeight: titleLineHeight + 'px',
          fontSize: titleFontSize + 'px'
        }"
      >
        {{ title }}
      </text>
    </view>
    <view class="nav-placeholder" :style="{ height: totalHeight + 'px' }"></view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue'

defineProps({
  title: {
    type: String,
    default: ''
  }
})

const totalHeight = ref(88)
const titleTop = ref(54)
const titleLineHeight = ref(24)
const titleFontSize = ref(18)

function setNavMetrics() {
  const systemInfo = uni.getSystemInfoSync()
  const statusBarHeight = systemInfo.statusBarHeight || 0
  let menuButton = null

  // #ifdef MP-WEIXIN
  menuButton = uni.getMenuButtonBoundingClientRect()
  // #endif

  if (menuButton && menuButton.top && menuButton.height) {
    const navPadding = menuButton.top - statusBarHeight
    totalHeight.value = menuButton.bottom + navPadding
    titleLineHeight.value = Math.min(28, menuButton.height)
    titleFontSize.value = 18
    titleTop.value = menuButton.top + (menuButton.height - titleLineHeight.value) / 2
    return
  }

  totalHeight.value = statusBarHeight + 44
  titleLineHeight.value = 24
  titleFontSize.value = 18
  titleTop.value = statusBarHeight + 10
}

onMounted(() => {
  setNavMetrics()
})
</script>

<style lang="scss" scoped>
.ai-nav-title {
  position: relative;
  z-index: 90;
}

.nav-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: #ffffff;
  box-sizing: border-box;
}

.nav-title {
  position: absolute;
  left: 30rpx;
  color: #333333;
  font-weight: 700;
  white-space: nowrap;
}

.nav-placeholder {
  width: 100%;
  background: #ffffff;
}
</style>