uniapp 更换导航栏图标并添加事件

最新推荐文章于 2024-07-17 11:37:40 发布

Nancy617

最新推荐文章于 2024-07-17 11:37:40 发布

阅读量1.1k

点赞数 1

文章标签： uni-app

本文链接：https://blog.csdn.net/Nancy617/article/details/116202929

版权

本文介绍了如何在uni-app中配置导航栏，包括将右上角图标替换为加号，并添加点击事件。通过在pages.json中修改对应页面配置，使用iconfont的unicode编码来设置图标，同时详细讲解了添加事件的步骤。

摘要由CSDN通过智能技术生成

1.配置导航栏

先看设计图

可见：右上角是个加号图标，点击有跳转功能

在pages.json中找到对应页面进行配置：
~~（因为图标是个加号所以偷懒用了文字嘻嘻）~~

{
			"path": "pages/addrList/addrList",
			"style": {
				"navigationBarTitleText": "地址本",
				"enablePullDownRefresh": false,
				"app-plus": {
					"titleNView": {
						"buttons": [{
								"text": "+",
								"fontSize": "24px",
								"float": "right"
							}
						]
					}
				}
			}
		},

如果两边都需要更换图标：

{
            "path": "pages/my/index",
            "style": {
                "app-plus": {
                    "titleNView": {
                        "buttons": [{