uniapp小程序顶部状态栏占位和自定义头部导航栏

子组件custom-header.vue

js 复制代码

<template>
  <view class="custom-header">
    <!-- 顶部状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏 -->
    <view class="nav-bar" :style="navBarStyle">
      <!-- 左侧插槽内容 -->
      <view class="left-slot">
        <text style="line-height: 44px;">返回</text>
      </view>

      <!-- 中间插槽内容 -->
      <view class="center-slot">
        <text style="line-height: 44px;">标题</text>
      </view>

      <!-- 右侧插槽内容 -->
      <view class="right-slot">
        <text style="line-height: 44px;">更多</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'CustomHeader',
    data() {
      return {
        statusBarHeight: 0, // 状态栏高度
        navBarHeight: '44px', // 导航栏高度
        paddingTop: '0px', // 导航栏上边距
      };
    },
    computed: {
      navBarStyle() {
        return {
          height: this.navBarHeight,
          paddingTop: this.paddingTop,
        };
      },
    },
    mounted() {
      this.getSystemInfo();
      this.getMenuButtonInfo();
    },
    methods: {
      // 获取系统信息
      getSystemInfo() {
        const systemInfo = uni.getSystemInfoSync();
        this.statusBarHeight = systemInfo.statusBarHeight || 0;
        console.log('状态栏高度:', this.statusBarHeight);
      },
      // 获取胶囊按钮信息
      getMenuButtonInfo() {
        if (uni.getMenuButtonBoundingClientRect) {
          const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
          console.log('胶囊按钮信息:', menuButtonInfo);

          const paddingTop = menuButtonInfo.top - this.statusBarHeight;
          const navBarHeight = menuButtonInfo.height + paddingTop * 2;

          // 确保值是字符串，并包含单位
          this.navBarHeight = `${navBarHeight}px`;
          this.paddingTop = `${paddingTop}px`;
        } else {
          console.warn('当前环境不支持获取胶囊按钮信息');
        }
      },
    },
  };
</script>

<style scoped>
  .custom-header {
    width: 100%;
  }

  .status-bar {
    background-color: transparent;
  }

  .nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .left-slot,
  .center-slot,
  .right-slot {
    display: flex;
    align-items: center;
    height: 100%; // 确保插槽内容高度撑满导航栏
  }

  .center-slot {
    flex: 1;
    justify-content: center;
  }

  .right-slot {
    justify-content: flex-end;
  }
</style>

父组件 index.vue

html 复制代码

<template>
<!-- 使用自定义头部组件 -->
		<custom-header>
			<!-- 左侧插槽内容 -->
			<template v-slot:left>
				<text>返回</text>
			</template>

			<!-- 中间插槽内容 -->
			<template v-slot:center>
				<text>标题</text>
			</template>

			<!-- 右侧插槽内容 -->
			<template v-slot:right>
				<text>更多</text>
			</template>
		</custom-header>
</template>

全局注册 main.js

js 复制代码

// 引入自定义头部组件
import CustomHeader from '@/components/custom-header.vue';

// 全局注册组件
Vue.component('CustomHeader', CustomHeader);