UNIAPP----修改原生导航栏样式，加图标，加文字，加点击事件。

最新推荐文章于 2024-06-20 17:57:00 发布

weixin_44126737

最新推荐文章于 2024-06-20 17:57:00 发布

阅读量3.1k

点赞数 1

分类专栏：笔记文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/weixin_44126737/article/details/126832205

版权

笔记专栏收录该内容

86 篇文章 5 订阅

订阅专栏

当uniapp或uview的默认导航栏不能满足需求时，可以通过设置`navigationStyle`为`custom`来自定义导航栏。教程中详细介绍了如何添加自定义图标和文字，包括设置左右按钮、调整大小和宽度，并提供了在线查找ttf字体图标编码的方法。同时，还展示了监听导航栏按钮点击事件的实现方式。

摘要由CSDN通过智能技术生成

uniapp或者uview的导航栏无法满足需求时，可用下面方法。

首先去掉原生导航。

"navigationStyle": "custom",

下面这段是图标代码，添加文字代码在第二个片段。

可改左右，大小，宽度等官网也有实例

 {
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "英语",
				"navigationStyle": "custom",
				"app-plus": {
					// "bounce": "none",
					"titleNView": {
						"buttons": [{
							"text": "\uF3B0",
							"fontSrc": "/static/MyFlutterApp.ttf",
							"fontSize": "25px",
							"float": "left",
							"width": "65px"
						}, {
							"text": "\uEA07",
							"fontSrc": "/static/MyFlutterApp.ttf",
							"fontSize": "25px",
							"float": "right",
							"width": "65px"
						}]
					}
				}
			}
		}

重点：找到ttf文件，http://font.qqe2.com/index.html 在线打开ttf文件，找到 $F101 这样的编号名称，然后去掉$ 换成 \uF101 即可。

如果是你想要导航栏右侧的文字，那么看下面代码

{
			"path": "pages/mine/set/myaddress/index",
			"style": {
				"navigationBarTitleText": "地址簿",
				"enablePullDownRefresh": false,
				"navigationStyle": "custom",
				"app-plus": {
					"titleNView": {
						"buttons": [{
							"text": "新增地址",
							"color": "#505050",
							"fontSize": "14px",
							"width": "88px"
						}]
					}
				}
			}

		}

上面这段代码就是导航栏添加 “新增地址”文字。

然后得获取到用户点击呀。

onNavigationBarButtonTap(e){
console.log(e.index) //如果是俩图标的话，index然后的0 或者1 就知道点击的哪个
},

这个方法适合onload的周期同级别的