uniapp 开发app 导航栏按钮切换

最新推荐文章于 2024-01-02 08:51:28 发布

善妒的蝎子

最新推荐文章于 2024-01-02 08:51:28 发布

阅读量939

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_36281882/article/details/121380095

版权

实现导航栏右侧按钮，管理和完成的切换效果，代码如下：

1. 通过按钮宽度控制显示隐藏，设默认完全按钮的宽度为0，即不显示

{
"path": "pages/addrManage/addrManage",
"style": {
	"navigationBarTitleText": "任务地址",
	"enablePullDownRefresh": false,
	"app-plus":{
		"titleNView":{
			"buttons":[
				{
					"text":"管理",
					"fontSize":"16px",
					"width":"60px"
				},
				{
					"text":"完成",
					"fontSize":"16px",
					"width":"0"
				}
			]
		}
	}
}
},

2. 通过触发按钮事件，重新更改按钮的宽度，使其显示隐藏

onNavigationBarButtonTap(e){
	let webview = this.$mp.page.$getAppWebview();  
	if(e.text == '管理') {
		webview.setTitleNViewButtonStyle(0, {
		  width:'0px'
		});
		webview.setTitleNViewButtonStyle(1, {
		   width:'60px'
		});
		this.isDelete = true;
	}else {
		webview.setTitleNViewButtonStyle(1, {
		    width:'0px'
		});
		webview.setTitleNViewButtonStyle(0, {
			width:'60px'
		});
		this.isDelete = false;
	}
},

亲测ok!