uni-app自定义导航栏+iconfont图标

liokF

已于 2024-03-21 11:22:24 修改

阅读量769

点赞数 1

分类专栏： uni-app 文章标签： css 小程序

于 2021-08-28 18:56:20 首次发布

本文链接：https://blog.csdn.net/weixin_51604420/article/details/119541708

版权

uni-app 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

uni-app自定义导航栏

1、下载iconfont图标

阿里图标库官网：

https://www.iconfont.cn/

在这里插入图片描述

没有登录注册的需要先登录注册

鼠标悬浮到图标上–>选择添加入库–>添加到项目(没有项目可以新建一个)

在这里插入图片描述

下载到本地

在这里插入图片描述

可在下载的文件里查看这样的字段\ue616

//带图标
{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor": "#2878ff",
				"navigationBarTextStyle": "white",
				"app-plus":{
					"titleNView":{
						"colorPressed":"#007AFF",
						 "buttons":[
				            {
				               "text": "\ue616",
				               "fontSrc": "/static/iconfont/iconfont.ttf",
				               "fontSize": "22px"
				            }
				        ]
					}
					}
			}
		}


//也可以不使用图标的方式，使用文字的方式


 {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页",
                "app-plus":{
                    "titleNView":{
                        "buttons":[
                            {
                                "text":"发邮件",
                                "type":"none",
                                 "fontSize":"14px",
                                "color":"#A59A9D",
                                "background":"#ffffff",
                                "float":"left"
                            },
                            {
                                "text":"收件箱",
                                "type":"none",
                                 "fontSize":"14px",
                                "color":"#A59A9D",
                                "background":"#ffffff
                            }
                        ]
                    }
                }
            }
        }