uniapp图标_跨移动端开发-UniAPP国产框架增加顶部导航栏小铃铛方法

开发app，基本都会有消息通知这个功能， 一般推送消息通知，还得需要有地方可以查询，所以需要在个人中心或者什么地方放置一个小铃铛

先上效果图

有通知的时候

没有通知的时候

铃铛来源

铃铛必须是字体图标

字体图标可以在阿里巴巴图标网站生成自己喜欢（不能这么说，美工出图）的字体图标

然后获取到ttf文件下载

我从网站找了一个

下载之前看一下这个代码，我们这个pages.json只需要x后面的也就是e623

在你的页面里面配置

pages.json

,{
			"path": "pages/personcenter/personcenter",
			"style": {
				"navigationBarTitleText": "个人中心",
				"app-plus": {  
					"titleNView": {  
						"buttons": [  
							{  
								"text": "ue623",  
								"fontSrc": "/static/fonts/iconfont.ttf",  
								"fontSize": "22px",  
								"float": "right",
								"type": "none"
							} 
						]
					}  
				}  
			}
		}

注意：

fontSrc 一定要绝对路径， 从/开始， 要不然会出现图标找不到的问题

text 写那个代码 u 是uniapp的 后面的e623 就是我们说到的那个

float 显示在左边还是右边 类似css 的float

type 是类型

fontSize 字体大小

当消息出现的时候要动态发生改变

使用js获取到这个当前页面的对象， 动态修改这个图标的角标，也就是这个小红点 带着数字

var currentWebview = this.$mp.page.$getAppWebview();
var tn = currentWebview.getStyle().titleNView;
if(that.msgCount != 0){
	tn.buttons[0].badgeText = that.msgCount;
}else{
	delete tn.buttons[0].badgeText;
}

增加铃铛的点击事件

这个函数式是系统级别函数，是和onLoad一个级别的

onNavigationBarButtonTap(obj) {
      // TODO 
			uni.navigateTo({
				url: '../notice/notice'
			})
		},

现在就完事了