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

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

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

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.在阿里图标库找到想要的图标，并加入购物车
在这里插入图片描述

2.在右上角购物车中找到下载代码按钮，并下载下来
在这里插入图片描述
3.解压缩下载完成的文件，如下，把文件里的iconfont.ttf放到static文件夹里，然后再打开iconfont.css里查看unicode编码

4.最后把对应图标的编码填写到page.json的配置项里text，需要写成一个”\u***“，然后重启

导航图标的点击事件如下：

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
}