uniapp开发微信小程序之隐藏头部导航栏

原创已于 2023-05-31 10:47:06 修改 · 3.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #uni-app #小程序

于 2023-05-29 16:09:34 首次发布

uniapp 专栏收录该内容

10 篇文章

订阅专栏

博客介绍了微信小程序头部导航栏相关内容。开发中有时需隐藏或自定义头部导航栏，可在pages.json中设置“navigationStyle”:“custom”，还给出局部和全局隐藏的方法。此外，提到顶部导航栏标题在开发者工具和手机中显示位置不同，想居中只能自定义。

微信小程序中自带头部导航栏，使用非常方便；但开发中我们有时候是不需要的头部导航栏的，或者说想自定义头部导航栏，都需要隐藏头部导航栏。可以在pages.json中设置自定义"navigationStyle":“custom”。具体代码如下
局部隐藏：

"pages": [
		{  // 正常设置顶部导航
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationBarTextStyle": "black",
				"enablePullDownRefresh": false
			}

		},{ // 自定义顶部导航
			"path": "pages/my/my",
			"style": {
						"navigationStyle":"custom",
						"app-plus":{
							"titleView":false
						}
			}

		}
]

全局设置隐藏

"window": {
    "navigationBarTextStyle": "black",
	"navigationBarTitleText": " ",
	"navigationBarBackgroundColor": "#FFFFFF",
	"backgroundColor": "#FFFFFF",
    "navigationStyle": "custom"
}