uni-app配置和修改原生导航栏按钮的文字/颜色等

你的名字 2023-02-23 08:27 1129阅读 0赞

**1）配置**  
在pages下创建collect.vue示例，然后在pages.json页面下配置路径，代码如下，其中“botton”属性是一个数组，放在“app-plus”下，属于安卓或IOS端组件，所以后面动态修改属性时候，必须用条件编译，判断是在“app-plus”下才修改，否则在h5或小程序端会报错

{ 
    	//收藏
    	"path": "pages/collect",
    	"style": { 
    		"navigationBarTitleText":"收藏",
    		"app-plus": { 
    			"titleNView": { 
    				"titleSize": "36rpx",
    				"buttons": [
    					{ 
    					    "float": "right",
    						"fontSize": "30rpx",
    						"text": "编辑",
    						"width":"120rpx"
    					},
    					{ 
    						"float": "right",
    						"fontSize": "30rpx",
    						"text": "搜索"
    					}
    				]
    			}
    		}
    	}
    },

效果如图  
![在这里插入图片描述][20200710092050446.png]  
**2）动态修改**  
在collect.vue内，点击导航栏顶部按钮会触发函方法onNavigationBarButtonTap(e)，该方法与onLoad()，data()方法同级，e是点击事件，会判断你点击了“botton”数组里的哪个按钮，e.index是按钮下标，从而让开发者知道点击了哪个按钮，比如我这里，点击“编辑按钮”是1，“搜索”按钮是2

onNavigationBarButtonTap(e){ 
    	if(e.index==0){ 
    		// #ifdef APP-PLUS 
    		const currentWebview = this.$mp.page.$getAppWebview(); 
    		currentWebview.setTitleNViewButtonStyle(e.index, {   //h5端会报错
    			text: "完成"
    		}); 
    		// #endif
    				 
    	}
    }

这样点击后，“编辑”按钮文字就会变为“完成”

// \#ifdef APP-PLUS和// \#endif可不是注释，是uni-app的平台条件编译，详情可以到这里查看，[uni-app官网平台判断][uni-app]

const currentWebview = this.$mp.page.$getAppWebview();

上面语句的作用是获取当前页面的AppWebview，从而对导航栏的按钮进行操作

setTitleNViewButtonStyle（按钮下标，\{属性：值\}）用于修改按钮的属性，哪些属性可以修改，可以到这里查看，[uni-app官网button属性][uni-app_button]

[20200710092050446.png]: https://img-blog.csdnimg.cn/20200710092050446.png
[uni-app]: https://uniapp.dcloud.io/frame?id=%E5%88%A4%E6%96%AD%E5%B9%B3%E5%8F%B0
[uni-app_button]: https://uniapp.dcloud.io/collocation/pages?id=h5-titlenview-buttons