uniapp导航栏添加自定义按钮 修改导航栏标题等信息

添加自定义按钮

按钮的点击事件需要在页面监听onNavigationBarButtonTap事件

页面监听代码如下：

exportdefault{     

        data() {    

                   return{}     

                 },     

 onNavigationBarButtonTap() {

           console.log("点击了自定义按钮");     

}  }

pages.json配置如下：

{
"path":"pages/log/log",
"style": {
    "navigationBarTitleText":"hello",
    "app-plus": {
        "titleNView": {
             "buttons": [{
                "text":"\ue534",
                "fontSrc":"/static/uni.ttf",
                "fontSize":"22px"
             }]             
         }          
    }     
 } 
 }

buttons的text推荐使用字体图标。

如果按钮使用的汉字或英文较长，推荐把字体改小一点，或者调节按钮宽度、padding等值。

配置button的背景颜色为透明：background:'rgba(0,0,0,0)'

自定义按钮带红点和角标

{"path":"nav-dot/nav-dot",
    "style": {
        "navigationBarTitleText":"导航栏带红点和角标",
        "app-plus": {
            "titleNView": {
            "buttons": [                      
                {
                    "text":"消息",
                    "fontSize":"14",
                    "redDot":true
                },                      
                {"text":"关注",
                    "fontSize":"14",
                    "badgeText":"12"
                }                  
            ]              
            }             
         }      
    }  
}

// #ifdef APP-PLUS  
var webView = this.$mp.page.$getAppWebview();  

// 修改buttons  
// index: 按钮索引, style {WebviewTitleNViewButtonStyles }  
webView.setTitleNViewButtonStyle(0, {  
    text: 'hello',  
});  

// 修改按钮上的角标  
// index: 按钮索引, text: 角标文本内容  
webView.setTitleNViewButtonBadge({  
    index: 0,  
    text: 10,  
});  

// 设置 searchInput的 focus  
// focus: true | false  
webView.setTitleNViewSearchInputFocus(true)  

// 设置 searchInput的 text  
webView.setTitleNViewSearchInputText(text)  

// searchInput 通过 webview 的 setStyle 方法进行更新  
var tn = currentWebview.getStyle().titleNView;  
if (tn.buttons) {    
uni.getSystemInfo({    
    success:function(res){    
        if (res.platform=="ios") { // 这里在HBuilderX 1.9.9版本有个bug，searchInput的I变小写了 ，临时绕过下。更高版本会修复此bug    
            tn.searchinput.placeholder = 'test';    
            currentWebview.setStyle({    
                titleNView: tn    
            });    
        } else{    
            tn.searchInput.placeholder = 'test'; //这里有个已知bug，HBuilderX 1.9.9上，当searchInput位于首页时，动态设置placehold会导致buttons的点击事件消失。更高版本会修复此bug    
            currentWebview.setStyle({    
                titleNView: tn    
            });    
        }    
    }    
})    
}    

// #endif  

##### 修改导航栏信息

onReady() {
    let buttons = '按钮'
    //buttons = '\ue670' 如果是字体图标需要引入ttf文件
 
    // #ifdef APP-PLUS
    var currentWebview = this.$mp.page.$getAppWebview();
    console.log(currentWebview)
    var tn = currentWebview.getStyle().titleNView;  
    tn.buttons[0].text = buttons;     //[0] 按钮的下标
    currentWebview.setStyle({ 
    titleNView: tn 
    });
// #endif
}