uni-app 添加顶部导航栏并且更换图标；动态判断导航栏消息提醒的小红点是否显示

系统管理员 2022-12-08 15:53 419阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI0OTc1NA_size_16_color_FFFFFF_t_70_pic_center]  
效果如上图所示，点击消息按钮跳转到新页面。

page.json中如下配置：

{ 
    	"path": "pages/index/index",
    	// "style": { 
    	// "navigationStyle":"custom"
    	// }
    	"style" : {   
    		"navigationBarTitleText" : "北海救助局移动平台",  
    		"app-plus" : {   
    			"titleNView" : {   
    				"buttons" : [  
    					//显示小红点
    					{   
    						"text": "\ue63e",
    						"fontSrc": "/static/img/xiaoxi.ttf",
    						"fontSize" : "24",  
    						"redDot" : true  
    					}
    					//显示消息条数
    					// { 
    					// "text": "\ue534", 
    					// "fontSrc": "/static/uni.ttf", 
    					// "fontSize": "22px", 
    					// "badgeText" : "12" 
    					// } 
    				]  
    			}  
    		}  
    	}  
    },

在项目中引入字体图标的方法如下：  
1.在[阿里图标库][Link 1]找到想要的图标，并加入购物车  
![在这里插入图片描述][20200921163259970.png_pic_center]

2.在右上角购物车中找到下载代码按钮，并下载下来  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI0OTc1NA_size_16_color_FFFFFF_t_70_pic_center 1]  
3.解压缩下载完成的文件，如下，把文件里的iconfont.ttf放到static文件夹里，然后再打开iconfont.css里查看unicode编码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI0OTc1NA_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][20200921182301237.png_pic_center]  
4.最后把对应图标的编码填写到page.json的配置项里text，需要写成一个"\\u\*\*\*"，然后重启  
5. 导航图标的点击事件如下：

onNavigationBarButtonTap: function() {   
    	uni.navigateTo({ 
    	    url: '../remind/index',
    		success: res => { },
    		fail: (err) => { console.log(err)},
    		complete: (data) => { }
    	});  
    },

6.动态判断是否显示消息提醒的小红点

if(data.length==0) { 
    	// #ifdef APP-PLUS 
    	var webView = this.$mp.page.$getAppWebview();  
    	//隐藏角标
    	webView.hideTitleNViewButtonRedDot({ 
    		index:0,
    	}); 
    	// #endif
    } else { 
    	// #ifdef APP-PLUS
    	var webView = this.$mp.page.$getAppWebview();  
    	//显示角标
    	webView.showTitleNViewButtonRedDot({ 
    		index:0,
    	}); 
    	// #endif
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI0OTc1NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/5a8551e4dba7442ab759921cc412db8d.png
[Link 1]: https://www.iconfont.cn/
[20200921163259970.png_pic_center]: /images/20221123/0de610e6f08442d8a5a28f99d6586eeb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI0OTc1NA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/305a020ed17f4b7287345b69b01b1b66.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI0OTc1NA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/3495712694ab48cdb04daddd0f635c2e.png
[20200921182301237.png_pic_center]: /images/20221123/05336333be694ecba874cfb25d88d4af.png