Как установить цвет панели навигации и цвет заголовка в uniapp

Способ установки цвета панели навигации в uni-app выглядит следующим образом:

1. Установите цвет глобальной панели навигации в файле `pages.json`.

{
  "глобальный стиль" {
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTextStyle":"белый",
    "navigationBarTitleText":"уни-приложение",
  },
  "страницы" [
    // ...конфигурация страницы
  ]
}

Среди них navigationBarBackgroundColor устанавливает цвет фона панели навигации, navigationBarTextStyle устанавливает цвет заголовка панели навигации (только «черный» или «белый»), а navigationBarTitleText устанавливает текст заголовка панели навигации.

2. Установите цвет панели навигации для конкретной страницы в файле `pages.json`.

{
  "страницы" [
    {
      "путь" "страницы/индекс/индекс"      
        "стиль" {
        "navigationBarBackgroundColor":"000000",
        "navigationBarTextStyle":"белый",     
        "navigationBarTitleText": "Главная",
      }
    },
    // ...другая конфигурация страницы
  ]
}

После этой настройки цвет панели навигации соответствующей страницы переопределит значение, установленное глобально.

3. Динамически установить цвет панели навигации внутри страницы.

В `onLoad` или других методах страницы вызовите API `uni.setNavigationBarColor`, чтобы динамически установить цвет панели навигации.
uni.setNavigationBarColor({
  frontColor: '#ffffff', // цвет заголовка панели навигации, только 'черный' или 'белый'
  backgroundColor: '#000000' // Цвет фона панели навигации
});
После этой настройки цвет панели навигации текущей страницы переопределит глобальные значения и значения конфигурации страницы.

Guess you like

Origin blog.csdn.net/weixin_60415789/article/details/130269914