uniapp设置标题栏颜色

在uniapp中，我们可以使用全局配置来设置标题栏的颜色。我们需要在App.vue文件中设置navbarBackgroundColor属性来指定标题栏的背景颜色，例如：

<template>
  <div>
    <nav-bar :title="title" :background-color="navbarBackgroundColor"></nav-bar>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'UniApp',
      navbarBackgroundColor: '#ffffff' // 设置标题栏背景颜色
    }
  }
}
</script>

在上面的示例中，我们通过将navbarBackgroundColor属性设置为白色来改变标题栏的背景色。您可以将此属性设置为您想要的任何颜色代码。

此外，如果您想为每个页面设置不同的标题栏颜色，可以在相应的页面中使用配置项来实现。例如，在index.vue中，您可以使用以下代码来为标题栏设置不同的背景色：

<template>
  <div>
    <nav-bar :title="title" :background-color="navbarBackgroundColor"></nav-bar>
    <div>这是首页</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'UniApp',
      navbarBackgroundColor: '#ff0000' // 设置首页标题栏背景颜色为红色
    }
  }
}
</script>

在这种情况下，我们将navbarBackgroundColor属性设置为红色，在首页中将标题栏的背景色设置为红色。在其他页面中，您可以使用类似的方法来设置自定义的标题栏颜色。