uni-app APP 中动态显示右上角按钮

uni-app APP 中动态显示右上角按钮

方案1 需要配合pages.json 配置实现

// 在要显示按钮的配置右上角按钮配置，并把文字颜色设置为页面背景色
{
	"path": "pages/instock/sub-pages/subIntoWork",
	"style": {
		"navigationBarTitleText": "",
		"enablePullDownRefresh": false,
		"onReachBottomDistance": 100,
		"app-plus": {
			"titleNView": {
				"buttons": [{
					"text": "操作",
					"fontSize": "30rpx",
					"color":"transparent",
					"width": "auto" // 防止按钮显示不全
				}]
			}
		}
	}
},

// 在页面文件中 通过判断修改按钮颜色
const webView = this.$mp.page.$getAppWebview();  
webView.setTitleNViewButtonStyle(0, {
	    "color":"#6281dd"
});

这种方法的缺陷
1、麻烦，不能一步设置完成，还需要配合背景色
2、onNavigationBarButtonTap 中进行判断是否进行下一步操作

// 这个两个方法也可以实现显示按钮，也需要配合pages.json中buttons的配置才能显示
webView.setTitleNViewButtonBadge({  
    index: 0,  
    text: 10,  
}); 
webView.setTitleNViewButtonStyle(0, {
	    "color":"#6281dd"
});