Appearance
全局配置设置在项目根目录下的pages.json
文件中。globalStyle用于设置应用的状态栏、导航条、标题、窗口背景色等,这里列举关于状态栏和导航栏的常用属性,官方文档
属性 | 类型 | 默认值 | 描述 | 平台差异说明 |
---|---|---|---|---|
navigationBarBackgroundColor | HexColor | #F7F7F7 | 导航栏背景颜色(同状态栏背景色) | APP与H5为#F7F7F7,小程序平台请参考相应小程序文档 |
navigationBarTextStyle | String | white | 导航栏标题颜色及状态栏前景颜色,仅支持 black/white | |
navigationBarTitleText | String | 导航栏标题文字内容 | ||
titleImage | String | 导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址 | 支付宝小程序、H5、APP | |
transparentTitle | String | none | 导航栏整体(前景、背景)透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明 | 支付宝小程序、H5、APP |
titlePenetrate | String | NO | 导航栏点击穿透 | 支付宝小程序、H5 |
navigationStyle | String | default | 导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏,需看使用注意 | 微信小程序 7.0+、百度小程序、H5、App(2.0.3+) |
参考配置如下
json
{
//pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
// 状态栏与导航栏背景颜色
"navigationBarBackgroundColor": "#F8F8F8",
// 状态栏与导航栏字体颜色仅支持 black/white(默认)
"navigationBarTextStyle": "black",
// 导航栏标题文字
"navigationBarTitleText": "星空小屋",
// 导航栏图片地址(替换导航栏标题文字)
"titleImage": "/static/logo.png",
// 导航栏样式,仅支持 default/custom, custom不显示原生导航栏,状态栏也不占位
"navigationStyle": "default"
}
}
bounce 上拉下拉回弹
属性 | 类型 | 默认值 | 描述 | 平台差异说明 |
---|---|---|---|---|
backgroundColorTop | HexColor | #ffffff | 顶部窗口的背景色(bounce回弹区域) | 仅 iOS 平台 |
backgroundColorBottom | HexColor | #ffffff | 底部窗口的背景色(bounce回弹区域) | 仅 iOS 平台 |
backgroundColor | HexColor | #ffffff | 下拉显示出来的窗口的背景色 | 微信小程序 |
ios平台有回弹效果,微信小程序则是下拉显示出来的窗口背景色,也有动画效果,参考配置:
json
"globalStyle": {
// 上拉下拉回弹背景色(微信小程序)
"backgroundColor": "#e42863",
// 下拉顶部回弹背景色(ios)
"backgroundColorTop": "#000",
// 上拉底部回弹背景色(ios)
"backgroundColorBottom": "#345DC2"
}