uniapp 顶部导航如何实现

在uniapp中，如何自定义实现顶部导航栏？我尝试修改pages.json的navigationBar配置，但只能调整基础样式。想实现类似微信小程序那种带返回按钮和胶囊按钮的导航效果，或者完全自定义的导航样式（比如增加搜索框、图标等）。请问具体该怎么做？是否需要使用原生导航栏配合自定义组件？有没有完整的示例代码可以参考？

2 回复

在 pages.json 中配置 navigationBar 属性，设置标题、背景色等。也可使用自定义导航栏，通过 uni.getSystemInfoSync() 获取状态栏高度，结合 flex 布局实现。


在 UniApp 中，实现顶部导航主要通过以下两种方式：

1. 使用原生导航栏（推荐）

在 pages.json 中配置页面样式，系统会自动生成顶部导航栏。

示例配置：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#007AFF",
        "navigationBarTextStyle": "white"
      }
    }
  ],
  "globalStyle": {
    "navigationBarBackgroundColor": "#007AFF",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "默认标题"
  }
}

常用配置属性：

  • navigationBarTitleText：导航栏标题
  • navigationBarBackgroundColor：背景色（十六进制颜色值）
  • navigationBarTextStyle：标题颜色（white/black）
  • navigationStyle：设置为 custom 可隐藏原生导航栏

2. 自定义导航栏

如需完全自定义样式，可隐藏原生导航栏后自行实现：

步骤：

  1. 在 pages.json 中设置 "navigationStyle": "custom"
  2. 在页面中使用组件构建导航栏

示例代码：

<template>
  <view>
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left" @click="goBack">
        <text>返回</text>
      </view>
      <view class="navbar-title">{{ title }}</view>
      <view class="navbar-right">
        <text>按钮</text>
      </view>
    </view>
    
    <!-- 页面内容 -->
    <view class="content">
      <!-- 页面具体内容 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '自定义标题'
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
.custom-navbar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  background-color: #007AFF;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.content {
  margin-top: 44px; /* 为导航栏留出空间 */
}
</style>

注意事项：

  • 使用自定义导航栏时需要考虑不同设备的状态栏高度
  • 可通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度
  • 建议使用条件编译处理不同平台的差异

推荐优先使用原生导航栏，性能更好且开发更简单。仅在需要特殊UI设计时才使用自定义方案。

回到顶部