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

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

uni-app自定义导航栏按钮以及事件、禁用原生导航栏_第1张图片

4、自定义导航栏文字

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

你可能感兴趣的:(前端,uni-app,前端框架)