Skip to content

全局配置设置在项目根目录下的pages.json文件中。globalStyle用于设置应用的状态栏、导航条、标题、窗口背景色等,这里列举关于状态栏和导航栏的常用属性,官方文档

属性类型默认值描述平台差异说明
navigationBarBackgroundColorHexColor#F7F7F7导航栏背景颜色(同状态栏背景色)APP与H5为#F7F7F7,小程序平台请参考相应小程序文档
navigationBarTextStyleStringwhite导航栏标题颜色及状态栏前景颜色,仅支持 black/white
navigationBarTitleTextString导航栏标题文字内容
titleImageString导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址支付宝小程序、H5、APP
transparentTitleStringnone导航栏整体(前景、背景)透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明支付宝小程序、H5、APP
titlePenetrateStringNO导航栏点击穿透支付宝小程序、H5
navigationStyleStringdefault导航栏样式,仅支持 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 上拉下拉回弹

属性类型默认值描述平台差异说明
backgroundColorTopHexColor#ffffff顶部窗口的背景色(bounce回弹区域)仅 iOS 平台
backgroundColorBottomHexColor#ffffff底部窗口的背景色(bounce回弹区域)仅 iOS 平台
backgroundColorHexColor#ffffff下拉显示出来的窗口的背景色微信小程序

ios平台有回弹效果,微信小程序则是下拉显示出来的窗口背景色,也有动画效果,参考配置:

json
"globalStyle": {
    // 上拉下拉回弹背景色(微信小程序)
    "backgroundColor": "#e42863",
    // 下拉顶部回弹背景色(ios)
    "backgroundColorTop": "#000",
    // 上拉底部回弹背景色(ios)
    "backgroundColorBottom": "#345DC2"
}