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

最新推荐文章于 2025-09-11 16:50:32 发布

原创最新推荐文章于 2025-09-11 16:50:32 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

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

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": [{
                                "text": "\ue605",
                                "fontSrc": "/static/iconfont.ttf",
                                "fontSize": "22px",
                                "float": "left"
                            },
                            {
                                "text": "\ue606",
                                "fontSrc": "/static/iconfont.ttf",
                                "fontSize": "22px"
                            }
                        ]
                    }
                }
            }
        },

这里的图标是从iconfont来的。具体步骤是下载图标代码到本地后，把文件里的iconfont.ttf丢到static文件夹里，然后再打开iconfont.css里查看unicode编码。最后把对应图标的编码填写到刚刚的配置项里就完事了。注意“text”需要写成"\u****"的格式。

2.添加事件

onNavigationBarButtonTap:function(e){
      console.log(JSON.stringify(e))
},
methods: {
},

完成~