uni-app原生导航栏自定义图标及去掉图标

uni-app自定义原生导航栏

下面是部分代码并不是完整的,这里只用作引子

{  //人员对比详情
					"path": "personnel-panorama-contrast/index",
					"style": {
						"navigationBarTitleText": "人员对比详情",
						"app-plus": {
							"titleNView": {
								"backgroundImage": "#FFFFFF",
								//自定义右边导航栏标
								"buttons": [
									{
										"text": "\ue6f7",
										"fontSrc": "/static/fonts/iconfont.ttf",
										"fontWeight": "normal",
										"width": "46px",
										"fontSize": "36rpx",
										"float": "right"
									}
								]
							}
						}
					}
				},

自定义右边导航栏图标用的阿里图标库

• 目录位置展示
  
• 阿里图标库选择-选择unicode选项
  

干的漂亮，现在我们已经在原生导航栏定义了我们想要的图标，那么怎么监听页面时间呢？定义页面图标必然需要监听它做一些处理，官方必然给我们一些方案了。

• 这是本人目前用到的监听效果

onNavigationBarButtonTap(e) {
		console.log("监听自定义图标点击了");
		uni.navigateTo({
			url:"pages/invest/personnel-panorama-add-list/index"
		})
	}

还没完呢，当然还有一些很难想象到的业务场景，比如现在共用一个页面，这个页面一个需要自定义icontfont,一个不需要那么我们怎么将不需要的自定义小图片去掉呢

• 整点有用的吧？直接上代码了

if(e.pageTitle === "高频出差"){
			// #ifdef APP-PLUS
			var webView = this.$mp.page.$getAppWebview();
			// 修改buttons
				webView.setTitleNViewButtonStyle(0, {
				width: '0',
				});
			// #endif
		}

这里是根据url中带过来的题目判断是都去掉自定义的原生导航栏上自定义图标

↓↓↓ 个人写的一个公众号，还在完善中 ↓↓↓ | ᴥ•́ )✧ ↓↓↓