uniapp顶部导航栏添加自定义按钮和操作(全局添加)

1.pages.json中作如下配置:

"fontSrc": "/static/icon/iconfont.ttf";图标所在的文件夹

	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#007AFF",
		"backgroundColor": "#FFFFFF",
		"app-plus": {
			"titleNView": {
				"buttons": [
					{
						"text":"\ue7c0",
						"fontSrc": "/static/icon/iconfont.ttf",
						"fontSize": "22px"
					}
				]
			}
		}
	}

2.在阿里图标库下载对应的图标:

uniapp顶部导航栏添加自定义按钮和操作(全局添加)_第1张图片

把下载好的文件放在static文件下

uniapp顶部导航栏添加自定义按钮和操作(全局添加)_第2张图片

3.点击事件的执行;

在每个压面添加onNavigationBarButtonTap 事件,如:

	onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url:`/pages/home/home`
			})
		},

uniapp顶部导航栏添加自定义按钮和操作(全局添加)_第3张图片

你可能感兴趣的:(uniapp顶部导航栏添加自定义按钮和操作(全局添加))