uniapp 導航欄設置文字圖片

{
    //收藏
    "path": "pages/collect",
    "style": {
        "navigationBarTitleText":"收藏",
        "app-plus": {
            "titleNView": {
                "titleSize": "36rpx",
                "buttons": [
                    {
                        "float": "right",
                        "fontSize": "30rpx",
                        "text": "編輯",
                        "width":"120rpx"
                    },
                    {
                        "float": "right",
                        "fontSize": "30rpx",
                        "text": "搜索"
                    }
                ]
            }
        }
    }
},

或者內置圖標內容

"titleNView":{
    "buttons":[
      {
        "type":"menu"
      }
    ]
  }

• "forward"：前進按鈕
• "back"：后退按鈕
• "share"：分享按鈕
• "favorite"：收藏按鈕
• "home"：主頁按鈕
• "menu"：菜單按鈕
• "close"：關閉按鈕
• "none"：無樣式，不顯示圖標

更多內容

https://ext.dcloud.net.cn/plugin?id=1765

uniapp導航欄自定義按鈕及點擊事件

可以在onReady內執行，以避免被框架內的修改所覆蓋。如果必須在onShow內執行需要延遲一小段時間

uni.setNavigationBarTitle({
    title: '新的標題'
});
uni.setNavigationBarColor({
    frontColor: '#000000', //前景顏色值，包括按鈕、標題、狀態欄的顏色，僅支持 #ffffff 和 #000000
    backgroundColor: '#F0AD4E', //背景顏色值，有效值為十六進制顏色
    animation: {  //動畫效果
        duration: 400,
        timingFunc: 'easeIn'
    }
})

 

    export default {
        data() {
            return {
                sign:0,
                aa:"wosbt"
            }
        },
        onReady() {
            uni.setNavigationBarTitle({
                title: this.aa
            })
        },
        onNavigationBarButtonTap(e) {
            console.log(this.aa)        
        },
        onLoad(option) {
            // uni.setNavigationBarTitle({
            //     title: option.title
            // })
            this.aa="66666"
        },
        methods: {
            
        }
    }

 

 

會顯示66666，點擊圖標會打印6666