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

文章介绍了在uni-app中设置导航栏颜色的三种方法:1)在全局样式pages.json中设置;2)针对特定页面在pages.json中配置;3)使用uni.setNavigationBarColorAPI在页面内部动态设置。这些设置可以覆盖默认值,实现自定义导航栏样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在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
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值