uni-app自定义导航栏按钮以及事件、禁用原生导航栏

原创已于 2022-09-09 09:50:21 修改 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #uni-app #前端框架

于 2022-09-08 17:00:19 首次发布

本文详细介绍了如何在uni-app中配置自定义导航栏，包括设置页面间的titleNView样式，实现按钮点击事件，并覆盖默认导航栏。通过实例展示了如何为右侧添加多个操作按钮并监听其点击，以及禁用原生导航栏和自定义导航栏文字的方法。

1、uni-app自定义导航按钮

配置pages.json--titleNView

{
			"path": "pages/address/address",
			"style": {
				"navigationBarTitleText": "首页",
				"enablePullDownRefresh": false,
				"titleNView": {
					"buttons": [{ //右侧操作按钮样式定义,是以数组形式定义，可定义多个
							"color": "#ffffff",
							"fontSize": "50rpx",
							"float": "right", //导航栏的左右位置
							"type": "back" //按钮类型,
						},
						{ //右侧操作按钮样式定义,是以数组形式定义，可定义多个
							"color": "#ffffff",
							"fontSize": "50rpx",
							"float": "right", //导航栏的左右位置
							"type": "back" //按钮类型,
						}
					]
				}
			}
		},

2、uni-app自定义导航栏按钮事件

onNavigationBarButtonTap(val) {
			if (val.index == 1) {
				console.log("第一个按钮");
			};

			if (val.index == 0) {
				console.log("第二个按钮");
			}
		},

3、禁用原生导航栏---pages.json

4、自定义导航栏文字

onLoad(options) {
			console.log('options', options)
			uni.setNavigationBarTitle({
				title: options.title
			})
		},