uniapp修改导航栏的文字和图标并触发事件_uniapp修改导航栏右侧文字

目录

1.设置图标 

 2.设置文字

3.设置两个自定义（一般只设置右边）

4.触发导航栏按钮

---

1.设置图标 

 1.把图标下载到本地

 2.放在项目里面

 

 3.把iconfont.ttf引入到pages.json使用

text就是对应的图标编号(在iconfont.css里面可以查看编号)

 注意：在使用的时候要把 \e719 改为 \ue719 加一个u

          {
			"path": "pages/chat/groupChat/groupChat",
			"style": {
				"navigationBarTitleText": "该群已解散",
				"navigationBarBackgroundColor": "#ffffff",
				"app-plus": {
					"titleNView": {
						"buttons": [{
							"text": "\ue719",
							"fontSrc": "/static/iconfont/iconfont.ttf",
							"color": "#000",
							"fontSize": "40px",
							"width": "50px"
						}]
					}
				}
			}
		},

 2.设置文字

 

 text属性里面直接写显示的文字

​
          {
			"path": "pages/chat/groupChat/groupChat",
			"style": {
				"navigationBarTitleText": "该群已解散",
				"navigationBarBackgroundColor": "#ffffff",
				"app-plus": {
					"titleNView": {
						"buttons": [{
							"text": "设置",
							"color": "#000",
							"fontSize": "15px",
							"width": "50px"
						}]
					}
				}
			}
		},
 
​

3.设置两个自定义（一般只设置右边）

         {
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "页面",
				"navigationStyle": "custom",
				"app-plus": {
					"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"
						}]
					}
				}
			}
		}

4.触发导航栏按钮

      // 导航栏进入设置
		onNavigationBarButtonTap: function(e) {
			console.log(e);
			uni.navigateTo({
				url: '/pages/chat/privateChat/friend?to=' + this.frienduuid + '=' + 
                this.title
			})
		},

onNavigationBarButtonTap(e){}

触发事件得到导航栏信息