uniapp 顶部导航栏背景色

### 修改 UniApp 应用中顶部导航栏的背景颜色 在 UniApp 中，可以通过配置 `pages.json` 文件来实现对顶部导航栏背景颜色的设置。以下是具体方法： #### 方法一：全局设置导航栏背景色 如果希望整个应用的所有页面都具有相同的导航栏背景颜色，则可以在 `pages.json` 文件中的 `globalStyle` 节点下进行统一配置。 ```json { "globalStyle": { "navigationBarBackgroundColor": "#3b82f6", // 设置导航栏背景颜色为蓝色 "navigationBarTextStyle": "white" // 设置导航栏文字颜色为白色 } } ``` 上述代码会将所有页面的导航栏背景颜色设为蓝色，并且文字颜色设为白色[^1]。 --- #### 方法二：局部设置单个页面的导航栏背景色 对于某些特定页面需要单独调整其导航栏背景颜色的情况，可以针对该页面路径，在 `pages.json` 的 `pages` 数组中为其指定样式。 ```json { "pages": [ { "path": "pages/login/login", "style": { "navigationBarBackgroundColor": "#02ac64", // 设置登录页导航栏背景颜色为绿色 "navigationBarTextStyle": "white" // 设置导航栏文字颜色为白色 } }, { "path": "pages/index/index", "style": { "navigationBarBackgroundColor": "#ff5722", // 设置首页导航栏背景颜色为橙色 "navigationBarTextStyle": "black" // 设置导航栏文字颜色为黑色 } } ] } ``` 通过这种方式，不同页面可以拥有不同的导航栏背景颜色和文字颜色[^2]。 --- #### 方法三：自定义导航栏并隐藏默认导航栏 如果需要完全自定义导航栏而不使用系统的默认导航栏，可以通过设置 `navigationStyle` 属性为 `custom` 来移除原生导航栏。 ```json { "pages": [ { "path": "pages/common/homePage/homePage", "style": { "navigationStyle": "custom" } } ] } ``` 此时，默认的导航栏会被隐藏，开发者可以根据需求自行设计导航栏界面[^3]。 --- #### 方法四：条件编译控制导航栏显示 为了适配多端环境（如微信小程序、H5），可以利用条件编译功能分别处理各平台的需求。 ```json { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "app-plus": { "titleNView": false, // 禁用原生导航栏 "scrollIndicator": "none" } } } ] } ``` 此方式适用于 H5 平台不需要导航栏而其他平台仍需保留返回按钮的情形[^4]。 --- ### 总结 以上四种方法涵盖了从全局到局部再到特殊场景下的导航栏背景颜色设置方案。根据实际开发需求选择合适的方式即可完成相应配置。