uniapp修改 原生 导航栏 / 原生 标题栏 的 按钮 文本修改 及 按钮 样式修改 支持 app-plus 支持 h5端 (按钮显示隐藏)

uniapp修改 原生 导航栏 / 原生 标题栏 的 按钮 文本修改 及 按钮 样式修改 支持 app-plus 支持 h5端 (按钮显示隐藏)

vue2	vue3	app-vue	app-nvue	HarmonyOS NEXT	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	未知	√	√	√	√	√

快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	钉钉小程序	快手小程序	飞书小程序	京东小程序
未知	未知	未知	未知	未知	未知	未知	未知	未知	未知

1、注意事项：修改操作时机
加载页面后随即操作： 必须在dom加载完后再操作，否则会报错！

这里推荐在uniapp页面生命函数onReady()里执行修改操作
当然vue生命函数mounted()里也可以

2、注意事项：修改影响程度
可能会影响上下级页面： 此页面的上一个页面或下一个页面的导航栏样式被影响
推荐使用：路由判断页面，控制只影响当前页面

let pages = getCurrentPages() // 获取栈实例
let page = pages[pages.length - 1] // 获取当前页面的数据，包含页面路由
if(page.route=="pages/***/***") { // 使用路由判断页面，控制只影响当前页面 }

3、如果你已经很熟悉uniapp的开发，请直接看完整版代码

---

一、完整代码

1、导航栏按钮样式修改

// 按钮显示隐藏
onClick(){
	let pages = getCurrentPages() // 获取栈实例
	let page = pages[pages.length - 1] // 获取当前页面的数据，包含页面路由
	if(page.route=="pages/***/***") { 
	// 这里判断，以下代码仅在此页面生效
	// 此处判断为：因为修改导航栏会导致上下级页面（此页面的上一个页面或下一个页面）
	// 的导航栏样式被影响，因此以下代码仅在此页面生效
		if(这里做你的显示隐藏判断){
			//#ifdef H5
			document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[0].style.width = 'auto';
			document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[0].querySelector('.uni-btn-icon').style.fontSize = '14px';
			//#endif
			//#ifdef APP-PLUS
			var webView = page.$getAppWebview();
			webView.setTitleNViewButtonStyle(1,{    
				width: 'auto',
				fontSize: '14px',
			});
			//#endif
		} else {
            //#ifdef H5
			document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[0].style.width = '0';
			document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[0].querySelector('.uni-btn-icon').style.fontSize = '0';
			//#endif
			//#ifdef APP-PLUS
			var webView = page.$getAppWebview();
			webView.setTitleNViewButtonStyle(1,{    
				width: '0',
				fontSize: '0',
			});
			//#endif
	        }
		}
	},
}

2、导航栏按钮名称修改

// 按钮名称切换
onClick(){
	let pages = getCurrentPages() // 获取栈实例
	let page = pages[pages.length - 1] // 获取当前页面的数据，包含页面路由
	if(page.route=="pages/***/***") { 
	// 这里判断，以下代码仅在此页面生效
	// 此处判断为：因为修改导航栏会导致上下级页面（此页面的上一个页面或下一个页面）
	// 的导航栏样式被影响，因此以下代码仅在此页面生效
		let str = '新的按钮名称';
		//#ifdef H5
		document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[0].querySelector('.uni-btn-icon').innerText=str;
		//#endif
		// #ifdef APP-PLUS
		var currentWebview = page.$getAppWebview();
		currentWebview.setTitleNViewButtonStyle(0, {
			text: str
		});
		// #endif
		}
	},
}

二、详解：修改样式

1、h5端修改样式：使用Dom操作修改

使用setAttribute()时，style下的css会被全部替换，这里不推荐
推荐使用style.**单独修改某样式

// 外层需要修改宽度
//#ifdef H5
document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[0].style.width = 'auto'; 
// #endif
// 显示：style.width = 'auto';
// 隐藏：style.width = '0';
// 注：[0]为按钮index，注意分别

// 里层需要修改字体大小
//#ifdef H5
document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[0].querySelector('.uni-btn-icon').style.fontSize = '14px';
// #endif
// 显示：style.fontSize = '14px';
// 隐藏：style.fontSize = '0';
// 注：[0]为按钮index，注意分别

这两行代码需要同时使用，否则可能会出现样式显示错乱的问题（例如：单个按钮可能无效，多个按钮被叠加显示等）。

2、app端修改样式：使用uniapp官方的setTitleNViewButtonStyle()

// #ifdef APP-PLUS
let pages = getCurrentPages() // 获取栈实例
let page = pages[pages.length - 1] // 获取当前页面的数据，包含页面路由
var webView = page.$getAppWebview();
webView.setTitleNViewButtonStyle(1,{    
	width: 'auto', // 显示：'auto'，隐藏：'0'
	fontSize: '14px', // 显示：'14px'，隐藏：'0'
});
// #endif
//setTitleNViewButtonStyle()函数的第一个参数为按钮index，注意分别

---

三、详解：修改文本

1、h5端修改文本：使用Dom操作修改

推荐使用innerText修改某样式

//#ifdef H5
document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[0].querySelector('.uni-btn-icon').innerText=str;
//#endif

2、app端修改文本：使用uniapp官方的setTitleNViewButtonStyle()

// #ifdef APP-PLUS
let pages = getCurrentPages() // 获取栈实例
let page = pages[pages.length - 1] // 获取当前页面的数据，包含页面路由
var webView = page.$getAppWebview();
webView.setTitleNViewButtonStyle(0,{    
	text: str
});
// #endif
//setTitleNViewButtonStyle()函数的第一个参数为按钮index，注意分别

---

结束：查阅文档

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