UNI-APP 添加顶部导航栏并且更换图标

最新推荐文章于 2025-04-15 16:12:59 发布

学web的碎碎

最新推荐文章于 2025-04-15 16:12:59 发布

阅读量4.9k

点赞数 3

分类专栏：小程序 + uni-app 文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_42695298/article/details/109200472

版权

本文介绍了如何在uni-app中添加自定义的顶部导航栏，并详细阐述了更换导航栏图标的步骤，包括从阿里矢量图标库下载图标，将ttf文件放入静态资源文件夹，获取并使用unicode编码进行配置，以及在uni-app的page.json中设置导航栏的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。
开发者通过编写 Vue.js 代码，uni-app 将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验。

要实现的最终效果图：

自定义导航栏

uni-app 在page.json里的配置项

{
	"path": "pages/chat/list",
	"style": {
		"navigationBarTitleText": "45things",
		"app-plus": {
			"titleNView": {
				"buttons": [{
					"text": "\ue409",
					"fontSrc": "/static/uni.ttf",
					"fontSize": "20px"
				},
				{
                    "text": "\ue409",
                    "fontSrc": "/static/uni.ttf",
                    "fontSize": "20px"
               }]
			}
		}
	}
},