小白也能学会！轻松自定义uniapp底部安全区，让你的页面更有个性！

2023-05-25 08:49:03

如何更改 uni-app 顶部状态栏和图标颜色

在 uni-app 开发中，有时需要更改顶部状态栏和图标的颜色以匹配应用程序的整体外观和风格。本文将指导您完成更改状态栏和图标颜色的简单步骤，让您的应用程序更具个性化和吸引力。

更改状态栏颜色

要更改 uni-app 状态栏颜色，只需在项目的 uni-app.js 文件中修改 globalStyle 对象。找到以下代码：

platform: process.env.VUE_APP_PLATFORM,
globalStyle: {
  navigationBarTextStyle: 'black',
  navigationBarTitleText: 'uni-app',
  navigationBarBackgroundColor: '#f8f8f8'
}

修改 navigationBarBackgroundColor 的值以反映您想要的颜色。例如，要将其更改为蓝色，请使用以下代码：

navigationBarBackgroundColor: '#0000FF'

更改图标颜色

要更改 uni-app 顶部状态栏中的图标颜色，您需要编辑项目的 manifest.json 文件。找到 "app" 对象，然后找到以下代码：

{
  "app": {
    "android": {
      "statusbar": {
        "textcolor": "black"
      }
    }
  }
}

修改 textcolor 的值以反映您想要的颜色。例如，要将其更改为白色，请使用以下代码：

textcolor: "white"

获取状态栏高度

在某些情况下，您可能需要获取状态栏的高度以调整应用程序布局。在 uni-app 中，您可以使用以下代码获取状态栏高度：

const info = uni.getSystemInfoSync();
const statusBarHeight = info.statusBarHeight;

示例代码

以下是一个完整的示例代码，演示如何更改 uni-app 中的顶部状态栏和图标颜色：

import uni from '@dcloudio/uni-app';

export default {
  data() {
    return {
      statusBarHeight: 0,
      statusBarColor: '#0000FF',
      statusBarTextColor: 'white'
    };
  },
  async mounted() {
    const info = uni.getSystemInfoSync();
    this.statusBarHeight = info.statusBarHeight;
  }
};