微信小程序 - 设置单个页面/导航栏/TabBar等背景颜色

3,929 阅读1分钟
  • 我们在小程序开发中怎么去设置单个页面的顶部导航条颜色,底部Tabbar条颜色,以及单个页面的背景颜色呢
  • 我们这里以导航栏进行举例,其他属性也是一样配置,可以查看一下 官网文档看看有哪些可配页面属性

  • app.json 里面配置是全局导航栏的配置
{
   // 页面路由
  "pages": [
    ......
  ],
  // 小程序页面全局配置
  "window": {
    "backgroundTextStyle": "light",
    // 这里我们配置全局导航栏背景颜色用这个
    "navigationBarBackgroundColor": "#ddd",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

但是在某种页面我们需要单独去设置这个页面的导航栏颜色时,只需要找到当前页面的 .json 文件进行配置一下 navigationBarBackgroundColor

{
  "navigationBarBackgroundColor": "#fff"
}

这样当进入这个有单独配置效果页面的时候,就会以当前页面配置显示为主,会覆盖掉全局配置属性。