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