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

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

*注：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

五、查阅文档

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