uniapp navigationstyle 如何自定义导航栏样式

在uniapp中如何自定义navigationBar的样式？我想修改导航栏的背景颜色、标题文字样式，并添加自定义按钮，但按照文档设置navigationStyle为custom后，页面内容会直接顶到状态栏下面。请问正确的实现方式是什么？是否需要配合CSS单独处理状态栏高度？有没有完整的代码示例可以参考？

2 回复

在uniapp中，可通过pages.json中设置navigationStyle为custom来自定义导航栏。然后使用CSS调整样式，如背景色、字体等。注意兼容不同设备状态栏高度。


在 UniApp 中，自定义导航栏样式主要通过以下步骤实现：

1. 全局禁用默认导航栏

在 pages.json 中设置 "navigationStyle": "custom"：

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

2. 自定义导航栏内容

在页面中编写自定义导航栏结构，通常使用 <view> 和 CSS 实现：

<template>
  <view class="custom-navbar">
    <!-- 左侧返回按钮 -->
    <view class="nav-left" @click="goBack">
      <text>返回</text>
    </view>
    <!-- 中间标题 -->
    <view class="nav-title">{{ title }}</view>
    <!-- 右侧操作按钮 -->
    <view class="nav-right">
      <text>按钮</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '首页'
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px; /* 标准导航栏高度 */
  padding: 0 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
.nav-title {
  font-size: 17px;
  font-weight: bold;
}
</style>

3. 适配不同设备状态栏

使用 uni.getSystemInfoSync() 获取状态栏高度，避免内容被遮挡：

data() {
  return {
    statusBarHeight: 0
  }
},
onLoad() {
  const systemInfo = uni.getSystemInfoSync()
  this.statusBarHeight = systemInfo.statusBarHeight
}

在样式中动态设置顶部间距：

.custom-navbar {
  padding-top: var(--status-bar-height); /* 通过 CSS 变量传递 */
}

注意事项：

  • 自定义导航栏需手动处理返回逻辑和页面滚动偏移。
  • 在 onLoad 中获取状态栏高度，确保兼容不同设备。
  • 测试时注意 iOS 和 Android 的差异，尤其是刘海屏适配。

通过以上方法，即可灵活自定义导航栏样式，满足个性化设计需求。

回到顶部