uniapp修改导航栏按钮文本及样式 app端及h5端

uniapp修改导航栏按钮 文本 及 样式 app-plus 及 h5端

注：在生命函数mounted()里执行修改操作

*注：app端与h5端修改方式不同

一、h5端：需使用Dom操作修改

1、按钮 样式 修改：

document.querySelector('.uni-page-head .uni-page-head-ft .uni-page-head-btn').setAttribute("style","background-color:transparent;width:auto;")

2、按钮 文本 修改：

document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[1].querySelector('.uni-btn-icon').innerText='按钮文本';
// 注：[1]为按钮index

注：[1]为按钮index

二、app端：使用：

var webView = this.$mp.page.$getAppWebview();
webView.setTitleNViewButtonStyle(0,{  
	width: 'auto',
	text: "新增协议",
	fontSize: '14px'
});

三、完整修改文本代码

// 导航锁定按钮
lockingBtn(){
	this.isLocking = this.isLocking == false ? true : false;
	let str = this.isLocking == false ? '锁定类别' : '解除锁定';
	//#ifdef H5
	document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[1].querySelector('.uni-btn-icon').innerText=str;
	//#endif
	// #ifdef APP-PLUS
	var currentWebview = this.$mp.page.$getAppWebview();
	currentWebview.setTitleNViewButtonStyle(1, {  //h5端会报错
		text: str
	});
	// #endif
}

四、完整修改样式代码

//#ifdef H5
	if(index == 2){
		document.querySelector('.uni-page-head .uni-page-head-ft .uni-page-head-btn').setAttribute("style","background-color:transparent;width:auto;")
		document.querySelector('.uni-page-head .uni-page-head-ft .uni-page-head-btn .uni-btn-icon').setAttribute("style","font-size:14px;color:#000000;font-weight:normal;")
	}else{
		document.querySelector('.uni-page-head .uni-page-head-ft .uni-page-head-btn').setAttribute("style","background-color:transparent;width:0;margin:0;")
		document.querySelector('.uni-page-head .uni-page-head-ft .uni-page-head-btn .uni-btn-icon').setAttribute("style","font-size:0;color:#000000;font-weight:normal;")
	}
//#endif
//#ifdef APP-PLUS
	if(index == 2){
		var webView = this.$mp.page.$getAppWebview();
		webView.setTitleNViewButtonStyle(0,{  
			width: 'auto',
			text: "新增协议",
			fontSize: '14px'
		});
	}else{var webView = this.$mp.page.$getAppWebview();  
		webView.setTitleNViewButtonStyle(0,{  
			width: '0',
			text: "",
			fontSize: '0'
		});
	}
//#endif

五、补充多个按钮的情况

// 导航栏按钮显示控制，h5状态和app-plus状态
agreemantAddBtnShow(){
	// showlockBtn 是否显示按钮，此处控制倒数第二个按钮
	let pages = getCurrentPages() // 获取栈实例
	let page = pages[pages.length - 1] // 获取当前页面的数据，包含页面路由
	console.log('查看路由',page,this.showlockBtn)
	if(page.route=="pages/***/***") { // 此处判断为：因为修改标题栏会导致下级页面（由此页面跳转的其他页面）的标题栏样式被覆盖，因此这里判断，以下代码仅在此页面生效
		//#ifdef H5
		if(this.showlockBtn){
			document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[1].setAttribute("style","background-color:transparent;width:auto;")
			document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[1].querySelector('.uni-btn-icon').setAttribute("style","font-size:14px;color:#000000;font-weight:normal;")
		}else{
			if(!document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')) return
			document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[1].setAttribute("style","background-color:transparent;width:0;margin:0;")
			document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[1].querySelector('.uni-btn-icon').setAttribute("style","font-size:0;color:#000000;font-weight:normal;")
		}
		//#endif
		//#ifdef APP-PLUS
		if(this.showlockBtn){
			var webView = this.$mp.page.$getAppWebview();
			webView.setTitleNViewButtonStyle(1,{  
				width: 'auto',
				// text: "按钮名称", // pages.js定义过，此处无需再覆盖，想覆盖也没问题
				fontSize: '14px',
				fontSrc: "/static/uniicons.ttf",
			});
		}else{
			var webView = this.$mp.page.$getAppWebview();  
			webView.setTitleNViewButtonStyle(1,{  
				width: '0',
				// text: "",
				fontSize: '0',
				fontSrc: "/static/uniicons.ttf",
			});
		}
		//#endif
	}
},

结束：查阅文档

1.查阅文档：uni-app 导航栏按钮点击事件，动态修改导航栏的文字,标题文字
1.查阅文档：uni-app配置和修改原生导航栏按钮的文字/颜色等
3.查阅文档：uni-app导航栏动态设置
4.查阅文档：setAttribute()方法
5.查阅文档：HTML DOM setAttribute() 方法
查阅官方论坛：导航栏 自定义的按钮文本动态修改 h5
查阅官方论坛：uniapp h5导航栏如何动态修改按钮的样式