Uniapp 自定义头部导航栏

Uniapp 自定义头部导航栏指南

在 Uniapp 中自定义头部导航栏可以通过以下几种方式实现：

1. 全局配置

在 pages.json 中进行全局配置：

json 复制代码

{
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "默认标题",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

html 复制代码

"style": {
  "navigationBarTitleText": "首页",      // 设置导航栏标题文字
  "navigationBarBackgroundColor": "#FF0000",  // 设置导航栏背景颜色
  "navigationBarTextStyle": "white"     // 设置导航栏文字颜色
}

2. 单页面配置

在 pages.json 中为特定页面配置：

json 复制代码

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#FF0000",
        "navigationBarTextStyle": "white"
      }
    }
  ]
}

3. 完全自定义导航栏

如果需要更复杂的自定义，可以隐藏原生导航栏并使用自定义组件：

首先在 pages.json 中隐藏原生导航栏：

json 复制代码

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom"
      }
    }
  ]
}

然后创建自定义导航栏组件，例如 custom-nav-bar.vue：

html 复制代码

<template>
  <view class="custom-nav-bar">
    <view class="nav-bar-content">
      <!-- 返回按钮 -->
      <view class="back-btn" @click="handleBack" v-if="showBack">
        <image src="/static/back.png" mode="aspectFit"></image>
      </view>
      
      <!-- 标题 -->
      <view class="title">{{ title }}</view>
      
      <!-- 右侧操作 -->
      <view class="right-actions">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    showBack: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.custom-nav-bar {
  height: var(--status-bar-height);
  padding-top: var(--status-bar-height);
  background-color: #FFFFFF;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.nav-bar-content {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 15px;
}

.back-btn {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.back-btn image {
  width: 100%;
  height: 100%;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.right-actions {
  width: 24px;
  height: 24px;
  margin-left: 10px;
}
</style>

在页面中使用自定义导航栏：

html 复制代码

<template>
  <view>
    <custom-nav-bar title="我的页面" :show-back="true">
      <template #right>
        <image src="/static/share.png" mode="aspectFit"></image>
      </template>
    </custom-nav-bar>
    
    <!-- 页面内容需要设置padding-top避免被导航栏遮挡 -->
    <view class="content" :style="{paddingTop: navBarHeight}">
      页面内容...
    </view>
  </view>
</template>

<script>
import CustomNavBar from '@/components/custom-nav-bar.vue'

export default {
  components: {
    CustomNavBar
  },
  data() {
    return {
      // 计算导航栏高度（状态栏高度 + 导航栏内容高度）
      navBarHeight: `calc(var(--status-bar-height) + 44px)`
    }
  }
}
</script>

注意事项

--status-bar-height 是 CSS 变量，表示状态栏高度
导航栏内容高度通常为 44px（iOS 标准）
使用自定义导航栏时，页面内容需要设置适当的 padding-top 避免被遮挡
在微信小程序中，自定义导航栏可能需要特殊处理，可以使用 uni.getSystemInfoSync() 获取状态栏高度

平台差异

H5：可以直接使用 CSS 实现复杂效果
小程序：部分样式可能需要特殊处理，特别是状态栏高度
App：支持最全面的自定义能力

通过以上方法，你可以灵活地实现各种自定义头部导航栏效果。