uniapp添加顶部导航栏并且使用iconfont图标

短命女 2023-10-04 19:09 10阅读 0赞

一、在阿里矢量图选择自己喜欢的图标，然后点击收藏

二、右上角下载全部已经收藏了的图标代码

三、在编辑器打开已经下载的文件,把文件里的iconfont.ttf丢到项目static文件夹里，然后再打开iconfont.css里查看unicode编码

四、最后把对应图标的编码填写到page.json的配置项里text，需要写成一个"\\u\*\*\*"，然后重启就实现了

page.json里的配置项

"pages": [ //pages数组中第一项表示应用启动页
    		{
    			"path": "pages/index/index",
    			"style": {
    				"app-plus": { //app端特有属性
    					"titleNView": {
    						"buttons": [{ //操作按钮样式定义,是以数组形式定义，可定义多个
    							"color": "#000",
    							"fontSize": "36rpx",
    							"text": "\ue605",
    							"fontSrc": "/static/fonts/iconfont.ttf",
    							"float": "left"
    						}]
    					}
    				},
    				"navigationBarTitleText": "修改手机号",
    				"enablePullDownRefresh": false
    			}
    		}
    	],

六、在对应的页面用event监听，在事件里填写想实现的效果

onNavigationBarButtonTap(e){
                uni.navigateTo({
    				url:"/pages/index/index"
    			})
            }

特别需要注意的是：要将字体css中的替换为\\ue605，否则识别不了

![d4e5cc9a862a4b99bced15a42ea218be.png][]

![c0f2aacba0bb4770aba5a3949c254da5.png][]

[d4e5cc9a862a4b99bced15a42ea218be.png]: https://img-blog.csdnimg.cn/d4e5cc9a862a4b99bced15a42ea218be.png
[c0f2aacba0bb4770aba5a3949c254da5.png]: https://img-blog.csdnimg.cn/c0f2aacba0bb4770aba5a3949c254da5.png