uniapp导航栏颜色

全局设置导航栏颜色

在 pages.json 文件中配置全局导航栏颜色，适用于所有页面：

{
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "App",
    "navigationBarBackgroundColor": "#007AFF"
  }
}

• navigationBarBackgroundColor：设置导航栏背景色（十六进制或 RGB 值）。
• navigationBarTextStyle：标题文字颜色（仅支持 black/white）。

单页面自定义导航栏颜色

在 pages.json 的 pages 节点中为特定页面单独设置：

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

动态修改导航栏颜色

通过 uni.setNavigationBarColor API 在运行时动态调整：

uni.setNavigationBarColor({
  frontColor: '#ffffff',  // 文字颜色（white/black）
  backgroundColor: '#4CD964', // 背景色
  animation: {  // 可选，过渡动画
    duration: 400,
    timingFunc: 'easeIn'
  }
});

注意事项

• 平台差异：部分样式在微信小程序和 H5 中可能表现不同，需测试兼容性。
• 透明度设置：仅 iOS 支持透明导航栏，需通过 rgba 颜色值实现。
• 自定义导航栏：如需完全自定义（如图标、按钮），需禁用原生导航栏并自行实现布局。

扩展方案

对于复杂需求（如渐变背景），可通过隐藏原生导航栏，使用 <view> 组件模拟导航栏，结合 CSS 实现更灵活的效果。