uniapp原生导航栏实现右侧操作按钮显示并动态修改样式

实现效果

①、在pages.json文件中添加以下代码

{
"path": "pages/account/jieshao/jieshao",
"style": {
	"navigationBarTitleText": "个人介绍",
	"navigationBarBackgroundColor": "#F25555",
	"navigationBarTextStyle": "white",
	"enablePullDownRefresh": false,
	"app-plus":{//app端特有属性
		"titleNView":{
			"buttons":[{//右侧操作按钮样式定义,是以数组形式定义，可定义多个
				"color":"#ffffff",
				"fontSize":"24rpx",
				"text":"编辑"
			}]
		}
	}
}
}

②、在jieshao.vue获取操作按钮点击事件并切换文字显示

<script>
export default {
	data() {
		return {
			// 当前页面状态 默认是信息显示页面
			isEditStatus: true,
		};
	},
	methods: {

	},

	// 按钮监听函数
	onNavigationBarButtonTap(e) {//不需要在<view>里面做任何操作，可直接引用
		// 这里用let或者var定义变量都可以
		let rightText = ''
		if(this.isEditStatus){//根据定义Boolean变量值，可多次切换文字
			rightText = '保存'
		}else{
			rightText = '编辑'
		}
		this.isEditStatus = !this.isEditStatus
		const currentWebview = this.$mp.page.$getAppWebview();
		//下面的方法即可修改文字内容及颜色等,e.index就表示修改当前点击按钮样式
		currentWebview.setTitleNViewButtonStyle(e.index, { //h5端会报错
			text: rightText
		});
	}
}
</script>

最终实现效果,点击编辑显示保存，点击保存显示编辑

更多属性设置可参考uni-app官网
关于app-plus更多介绍

查看流程


需要什么内容自己根据api添加属性即可，在代码里修改的时候，在currentWebview.setTitleNViewButtonStyle(e.index, {
//这里面只能写自定义按钮里面的相关属性
text: rightText
});