uniapp动态修改导航栏

1.修改导航栏buttons

如图动态修改角标

 

 

 

<template>
    <view>
    </view>
</template>

<script>
    export default {
        data(){
            return{
            }
        },
//监听头部导航红点事件
        onNavigationBarButtonTap(e) {
            if(e.index==0){//系统消息
                uni.navigateTo({
                    url:"../news/news"
                })
            }
        },
        mounted(){
//动态设置导航栏角标，0为从右往左数第一个，true显示还是隐藏角标或者红点，最后一个显示角标为多少
            this.setStyle(0,false,'');
        },
        methods:{
                        /**
             * 修改导航栏buttons
             * index[number] 修改的buttons 下标索引，最右边索引为0
             * show[boolean] 显示还是隐藏角标或者红点
             * text[string] 需要修改的角标的text 内容 ，如果定义redDot 此参数无效 ，如果定义badgeText请设置具体，如果不用输入
             */
            setStyle(index, show,text) {
                let pages = getCurrentPages();
                let page = pages[pages.length - 1];
                // #ifdef APP-PLUS
                let currentWebview = page.$getAppWebview();
                if(show){
                    if(index === 0){
                        currentWebview.setTitleNViewButtonBadge({index:index,text:text})
                    }else{
                        currentWebview.showTitleNViewButtonRedDot({index:index,text:text})
                    }
                }else{
                    if(index === 0){
                        currentWebview.removeTitleNViewButtonBadge({index:index})
                    }else{
                        currentWebview.hideTitleNViewButtonRedDot({index:index})
                    }
                }
                
                // #endif
            },
                }
    }
</script>

<style scoped="scoped" lang="scss"></style>       

 下面是官方demo实例方法

// #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