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