1. 全局、局部导航栏和状态栏配置
参考官网:https://uniapp.dcloud.io/collocation/pages.html
{ // 局部
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTextStyle": "white", // 导航栏标题颜色及状态栏前景颜色,仅支持 black/white,默认值:white
"navigationBarTitleText": "页面自定义标题", // 导航栏标题文字内容
"navigationBarBackgroundColor": "#028939", // 导航栏背景颜色(同状态栏背景色),默认值:#F7F7F7
"backgroundColor": "#F8F8F8" // 下拉显示出来的窗口的背景色,默认值:#ffffff
}
}
],
// 全局配置
"globalStyle": {
"navigationBarTextStyle": "black", // 导航栏标题颜色及状态栏前景颜色,仅支持 black/white,默认值:white
"navigationBarTitleText": "全局默认自定义标题", // 导航栏标题文字内容
"navigationBarBackgroundColor": "#F8F8F8", // 导航栏背景颜色(同状态栏背景色),默认值:#F7F7F7
"backgroundColor": "#F8F8F8" // 下拉显示出来的窗口的背景色,默认值:#ffffff
}
}
2. 手动设置局部导航栏
methods: {
setTitleText() {
uni.setNavigationBarTitle({
title: "导航栏文字设置"
})
},
setTitleBackground() {
uni.setNavigationBarColor({
frontColor: "#ffffff", // 导航栏文字设置
backgroundColor: "#007AFF"// 导航栏背景色设置
})
}
}
网友评论