uniapp develops h5, modifies the native navigation bar, and customizes buttons

Official documentation  on modifying the native navigation bar style

Adding custom buttons is only possible for apps and 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": "血糖记录"
			}
		}
	],

At this time the effect is like this:

You can then monitor user click events on the page:

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

Guess you like

Origin blog.csdn.net/m0_57033755/article/details/132976836