uni-app自定义导航栏和配置原生导航栏的一些方法以及动态修改原生导航栏内容样式的方法

最新推荐文章于 2024-09-19 23:27:12 发布

addU

最新推荐文章于 2024-09-19 23:27:12 发布

阅读量2.8k

点赞数

分类专栏： uni-app 文章标签： uni-app 导航栏

本文链接：https://blog.csdn.net/flyinglf/article/details/118939564

版权

本文介绍了uni-app中如何自定义导航栏，通过设置全局样式`globalStyle`或`titleNView`实现。自定义导航栏需要处理不同设备的头部间距问题，如iPhone X的刘海屏。同时，通过监听`onNavigationBarButtonTap`事件可处理导航栏按钮点击。此外，文章还探讨了动态修改原生导航栏内容样式的技巧。

摘要由CSDN通过智能技术生成

uni-app自定义导航栏就是摒弃它原有的导航栏样式，完全自定义重写，只需要将路由参数离的**“globalStyle”: { “navigationStyle”: “custom” }** 或者设置 titleNView设为false就可以在业务页面自定义书写导航栏内容，这里自定义的导航栏需要自己处理各种手机头部距离，也是比较麻烦的，比如iPhone X的刘海等。

	这里主要记一下原生导航栏的配置方法：

{
   
			"path": "pages/lx-news/TalentKnow/newsDetail",
			"style": {
   
				"navigationStyle":"custom",
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false,
				"app-plus": {
   
					"titleNView": {
   
						"type": "transparent"<