Uniapp 导航栏教程：全局设置、局部定制和动态更改一步到位！ Uniapp 新手必看：如何轻松设置顶部栏样式（完整代码示例）全面解析 Uniapp 顶部栏颜色设置：从全局配置到动态切换 Unia

南北极之间

已于 2024-12-26 15:32:46 修改

阅读量3.5k

点赞数 8

分类专栏：小程序文章标签： uni-app 前端 html vue.js 网页设计微信小程序小程序

于 2024-12-26 15:17:18 首次发布

本文链接：https://blog.csdn.net/qq_22182989/article/details/144745454

版权

小程序专栏收录该内容

54 篇文章

订阅专栏

Uniapp 顶部栏颜色设置教程：全局、局部和动态方法全解析

导航栏样式在移动端应用开发中至关重要，良好的导航栏设计不仅提升了应用的用户体验，还能增强品牌的统一性。Uniapp 提供了多种方式来管理导航栏样式：从全局设置到动态调整，以及为不同页面单独定制样式。

本教程将详细解析 4 种方法 来设置 Uniapp 导航栏颜色，手把手教你配置和调整。

方法一：全局统一设置导航栏样式

适用场景：当所有页面都需要使用相同的导航栏样式时，推荐在 pages.json 的 globalStyle 中统一设置。

配置步骤

打开项目根目录下的 pages.json 文件。
在 globalStyle 中定义导航栏的背景颜色、文字颜色和标题文字。

示例代码

{
  "globalStyle": {
    "navigationBarTitleText": "默认标题",
    "navigationBarBackgroundColor": "#3b82f6",
    "navigationBarTextStyle": "white"
  }
}

参数说明

navigationBarTitleText：默认的标题文字，所有页面都会继承。
navigationBarBackgroundColor：导航栏的背景颜色（例如 #FFFFFF）。
navigationBarTextStyle：导航栏文字颜色，仅支持 white 或 black。

优点：

简单易用，一次配置即可应用于所有页面。

不足：

如果部分页面需要自定义导航栏样式，则需要额外覆盖。

方法二：通过 `pages.json` 设置单个页面的导航栏样式

适用场景：当某些页面需要与全局样式不同的导航栏时，可在 pages.json 的单个页面配置中覆盖全局设置。

配置步骤

打开 pages.json 文件。
在需要设置的页面 style 属性中，覆盖全局的导航栏样式。

示例代码

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#1e293b",
        "navigationBarTextStyle": "white"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于我们",
        "navigationBarBackgroundColor": "#f97316"
      }
    }
  ]
}

优点：

灵活性高，可以为不同页面设置不同的导航栏样式。

不足：

当页面较多时，可能需要重复配置多个页面的导航栏样式。

方法三：动态更改导航栏样式

适用场景：如果需要在页面运行时，根据用户的操作动态调整导航栏样式，可以使用 uni.setNavigationBarColor 方法。

配置步骤

在页面的逻辑代码中调用 uni.setNavigationBarColor 方法。
设置导航栏的文字颜色和背景颜色，并可添加动画效果。

示例代码

uni.setNavigationBarColor({
  frontColor: '#ffffff', // 设置文字颜色
  backgroundColor: '#1f2937', // 设置背景颜色
  animation: {
    duration: 300, // 动画持续时间（毫秒）
    timingFunc: 'ease-in-out' // 动画效果
  }
});

参数说明

frontColor：导航栏文字颜色，仅支持 #ffffff（白色）和 #000000（黑色）。
backgroundColor：导航栏背景颜色，可设置任意合法的颜色值。
animation：动画效果，包括以下属性：
- duration：动画持续时间（单位：毫秒）。
- timingFunc：动画效果类型，如 linear、ease-in、ease-out 等。

动态示例

结合用户操作的动态切换，例如夜间模式：

function switchToNightMode() {
  uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#000000',
    animation: {
      duration: 500,
      timingFunc: 'ease-in-out'
    }
  });
}

优点：

实现动态效果，适用于需要根据用户行为调整导航栏样式的场景。

不足：

每次动态更改需要单独编写逻辑。

方法四：通过自定义组件实现统一样式

适用场景：如果导航栏内容或样式非常复杂，比如需要添加按钮、图标或动态标题，可以使用自定义组件来替代 Uniapp 的原生导航栏。

配置步骤

创建一个自定义组件，例如 custom-navbar.vue。
使用 fixed 定位方式实现导航栏固定效果。
在页面模板中引入并使用该组件。

示例代码

自定义组件：`components/custom-navbar.vue`

<template>
  <view class="custom-navbar" :style="{ backgroundColor: backgroundColor }">
    <text class="navbar-title">{{ title }}</text>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '标题'
    },
    backgroundColor: {
      type: String,
      default: '#3b82f6'
    }
  }
};
</script>

<style>
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.navbar-title {
  color: white;
  font-size: 18px;
}
</style>

页面使用：`pages/index/index.vue`

<template>
  <view>
    <custom-navbar title="首页" backgroundColor="#1e293b" />
    <view style="margin-top: 50px;">页面内容</view>
  </view>
</template>

<script>
import CustomNavbar from '@/components/custom-navbar.vue';

export default {
  components: {
    CustomNavbar
  }
};
</script>

优点：

自定义程度高，可自由添加按钮、图标等元素。
样式和功能可控，适合复杂需求场景。

不足：

实现稍复杂，需要手动处理导航栏的功能和交互。

代码完整示例

综合上述方法的代码示例，适合初学者快速上手。

`pages.json`

{
  "globalStyle": {
    "navigationBarTitleText": "学习平台",
    "navigationBarBackgroundColor": "#3b82f6",
    "navigationBarTextStyle": "white"
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#1e293b"
      }
    }
  ]
}

动态更改

uni.setNavigationBarColor({
  frontColor: '#ffffff',
  backgroundColor: '#FFD700',
  animation: {
    duration: 400,
    timingFunc: 'ease-in-out'
  }
});