uni-app导航栏动态设置

uni-app导航栏动态设置

uni-app导航栏标题，自定义按钮动态设置，只限于app和h5端

---

---

一、改变导航栏标题

在uni-app的示例：接口>界面>默认导航栏中就有这种方法。
小提示：如果需要在页面进入时设置标题，可以在onReady()内执行，以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间

uni.setNavigationBarTitle({
	 title: '新的标题'
})
//这两个值一起使用
uni.setNavigationBarColor({
	frontColor:'#000000',//仅支持 #ffffff 和 #000000
	backgroundColor:'十六进制颜色',
})

二、改变导航栏自定义按钮

1.设置自定义字体图标

更多的字体图标：这里

//在pages.json文件中配置
"style": {
	"navigationBarTitleText": "我的",
	"enablePullDownRefresh":true,//开启下拉刷新
	"backgroundColor":"#F4F4F4",
	"app-plus": {
		"bounce": "vertical",
		"titleNView": {
			"buttons": [{
				"text": "\ue502",// unicode 字符表示必须 '\u' 开头，如 "\ue123"（注意不能写成"\e123"）
				"fontSrc": "/static/uni.ttf",
				"fontSize": "26px",
				"color": "#FFFFFF",
				"width":"50px"
			}]
		}
	}
}

效果如下：

---

2.动态修改自定义按钮文字

首先在在pages.json文件中配置默认的文字，
属性float可以控制按钮在标题栏上的显示位置，可取值"left"、“right”

"app-plus": {
	"titleNView": {
		"buttons": [{
			"text": "保存",
			"fontSrc": "/static/uni.ttf",
			"fontSize": "30rpx",//fontSize控制字体大小
			"color": "#FFFFFF",
			"width":"50px"//width属性可以控制宽度，不支持rpx
		}]
	}
}

下面的方法可以设置文字，当然也可以设置文字为空，设置为空的情况下onNavigationBarButtonTap事件在部分app端还会触发。
想要设置文字为不显示，记得要在onNavigationBarButtonTap处理一下点击事件

this.setStyle('按钮')

setStyle(text) {
	let pages = getCurrentPages();
	let page = pages[pages.length - 1];
	// #ifdef APP-PLUS
	let currentWebview = page.$getAppWebview();
	let titleNView = currentWebview.getStyle().titleNView;
	// 添加文字过长截取为3个字符，请根据自己业务需求更改
	titleNView.buttons[0].text = text;
	currentWebview.setStyle({
		titleNView: titleNView
	});
	// #endif
	// #ifdef H5
	// h5 临时方案
	document.getElementsByClassName('uni-btn-icon')[1].innerText = text;
	// #endif
},

---

3.透明的导航栏

在需要单独一个返回的白色箭头的时候，type开启浮动让下面的盒子置顶，backgroundColor设置为透明即可。
返回事件onBackPress()可以在这里设置点击返回按钮后事件处理，在该函数中返回值为 true 时，才表示不执行默认的返回，自行处理此时的业务逻辑。

//pages.json文件中配置
"app-plus":{
	"titleNView":{
		"type":"float",
		"backgroundColor":"rgba(45, 197, 174,0)"
	}
}

//返回事件，在需要的vue页面中写
onBackPress(){
	/*
		自行处理此时的业务逻辑
	*/
	return true;//不执行默认的返回
}

效果图如下

---

结语

更多关于导航栏配置选项，可以去uni-app官方文档查看。