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

今天药忘吃喽~ 2023-01-18 04:03 484阅读 0赞

# 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"
    									}
    								]
    							}
    						}
    					}
    				},

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

*  目录位置展示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwNjYyMQ_size_16_color_FFFFFF_t_70_pic_center]
 *  阿里图标库选择-选择unicode选项  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwNjYyMQ_size_16_color_FFFFFF_t_70_pic_center 1]

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

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

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中带过来的题目判断是都去掉自定义的原生导航栏上自定义图标 ####

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

![在这里插入图片描述][b12d2e6dc6a741bc842067e581f4afc4.jpg_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwNjYyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/594e75d2e9f940ecb6b75ca8b9a1eba3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwNjYyMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221021/633f88fd6ce54ef6bf9e67ece93116e2.png
[b12d2e6dc6a741bc842067e581f4afc4.jpg_pic_center]: /images/20221021/214cc277a1f84cc796e7a186dbffe2e7.png