uni-app自定义导航图标

我就是我 2023-06-17 09:57 10阅读 0赞

## 引言 ##

导航栏在APP中引导说明的作用，通过导航描述，我们可以快速定位该页面的主要功能，不过现在的应用逐渐走向多元化，比如有些页面需要文字导航、有些需要图标导航、有些需要透明导航、有些需要渐进式导航、还有些根本就不需要导航，本次笔者记录一下用uni-app配置图标导航的过程。

## 配置选 ##

> [https://uniapp.dcloud.io/collocation/pages?id=style][https_uniapp.dcloud.io_collocation_pages_id_style]

**主要配置项**

![20191128155205821.png][]

##  使用案例 ##

{
    	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		{
    			"path": "pages/index/index",
    			"style": {
    				"titleImage":"static/hot.png"
    			}
    		}
    	],
    	"globalStyle": {
    		"navigationBarTextStyle": "black",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#F8F8F8",
    		"backgroundColor": "#F8F8F8"
    	}
    }

## 效果 ##

![2019112816014756.png][]

[https_uniapp.dcloud.io_collocation_pages_id_style]: https://uniapp.dcloud.io/collocation/pages?id=style
[20191128155205821.png]: https://img-blog.csdnimg.cn/20191128155205821.png
[2019112816014756.png]: https://img-blog.csdnimg.cn/2019112816014756.png

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp uni-icons组件自定义图标

文章目录 1️⃣ uni-icons组件 1.1 引用位置 1.2 FontEditor简介 1.2 FontEditor使

r囧r小猫/ 2023年09月27日 06:27/ 0 赞/ 166 阅读

相关 uni-app自定义导航图标

引言导航栏在APP中引导说明的作用，通过导航描述，我们可以快速定位该页面的主要功能，不过现在的应用逐渐走向多元化，比如有些页面需要文字导航、有些需要图标导航、有些需要透

我就是我/ 2023年06月17日 09:57/ 0 赞/ 11 阅读

相关 uni-app原生导航栏自定义图标及去掉图标

uni-app自定义原生导航栏下面是部分代码并不是完整的,这里只用作引子 { //人员对比详情 "path": "personnel

今天药忘吃喽~/ 2023年01月18日 04:03/ 0 赞/ 504 阅读

相关 uni-app 自定义导航栏图标+事件（一）

![2020091614002289.png][] 一、阿里巴巴矢量图选出自己想要的图标：[https://www.iconfont.cn/home/index?spm=a3

雨点打透心脏的1/2处/ 2022年12月07日 15:07/ 0 赞/ 732 阅读

相关 uniapp自定义导航的自定义按钮上的红点动态控制

在page.json页面写好路由 "buttons": [{ { "fontSrc": "/static/yticon.ttf",

野性酷女/ 2022年12月04日 01:14/ 0 赞/ 316 阅读

相关 uni-app 自定义导航栏图标+文字（二）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXh

超、凢脫俗/ 2022年10月31日 00:47/ 0 赞/ 11 阅读

相关 uniapp下导航栏自定义多按钮单击事件

uniapp官方给出的函数 onNavigationBarButtonTap （监听原生标题栏按钮点击事件，参数为Object） ![Image 1][] 按钮监听函数

今天药忘吃喽~/ 2022年04月25日 07:02/ 0 赞/ 953 阅读

相关 mui自定义图标

研究了一下自定义图标，不仅仅可以在h5里面用，还可以在小程序或者别的开发环境里面用。首先找到图标源，我自己找的是阿里巴巴矢量图库。 ![watermark_type_Zm

曾经终败给现在/ 2022年03月19日 17:40/ 0 赞/ 450 阅读

相关 uniapp组件-uni-nav-bar自定义导航栏

例1 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

今天药忘吃喽~/ 2021年07月25日 19:21/ 0 赞/ 3000 阅读

相关 uniapp 自定义头部导航

html 引用需要自行更改图片路径 <view class="bac-box"></view>  <view

亦凉/ 2021年07月25日 16:17/ 0 赞/ 1120 阅读