uniapp开发h5,修改原生导航栏,自定义按钮

关于修改原生导航栏样式的官方文档 

添加自定义按钮只有app和h5才可以 

"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/bloodWrite/index",
			"style": {
				"navigationBarTitleText": "血糖录入",
				"titleNView": {
					"buttons": [ //原生标题栏按钮配置,
						{
							"type": "none",
							"text": "我的设备", //原生标题栏增加分享按钮,点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听
							"float": "right",
							"color": "#00875A",
							"fontSize": "14px",
							"width": "130rpx"
						}
					]
				}
			}
		},
		{
			"path": "pages/bloodRecording/index",
			"style": {
				"navigationBarTitleText": "血糖记录"
			}
		}
	],

这个时候效果是这样的:

uniapp开发h5,修改原生导航栏,自定义按钮_第1张图片

之后在页面可以监听用户点击的事件:

onNavigationBarButtonTap: function(e) {
			console.log(e);
			// e的返回格式为json对象:{"text":"测试","index":0}
		},

你可能感兴趣的:(uniapp开发h5,uni-app,前端,javascript)