小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> uniapp怎么全局设置导航栏颜色,标题颜色

uniapp怎么全局设置导航栏颜色,标题颜色

在uni-app中设置导航栏颜色的方法如下:


1. 在`pages.json`文件中设置全局的导航栏颜色。

{
  "globalStyle" {
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTextStyle":"white",
    "navigationBarTitleText":"uni-app",
  },
  "pages" [
    // ...页面配置
  ]
}


其中`navigationBarBackgroundColor`设置导航栏背景颜色,`navigationBarTextStyle`设置导航栏标题颜色(只能是"black"或"white"),`navigationBarTitleText`设置导航栏标题文本。


2. 在`pages.json`文件中设置具体某个页面的导航栏颜色。

{
  "pages" [
    {
      "path" "pages/index/index"      
        "style" {
        "navigationBarBackgroundColor":"000000",
        "navigationBarTextStyle":"white",     
        "navigationBarTitleText": "首页",
      }
    },
    // ...其他页面配置
  ]
}


这样设置后,对应页面的导航栏颜色会覆盖全局设置的值。


3. 在页面内部动态设置导航栏颜色。


在页面的 `onLoad` 或其他方法中,调用 `uni.setNavigationBarColor` API 动态设置导航栏颜色。

uni.setNavigationBarColor({
  frontColor: '#ffffff', // 导航栏标题颜色,只能是'black'或'white'
  backgroundColor: '#000000' // 导航栏背景颜色
});

这样设置后,当前页面的导航栏颜色会覆盖全局及页面配置的值

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了