uniapp はナビゲーション バーの右側のボタンを構成します

uniapp はナビゲーション バーの右側のボタンを構成します

1.pages.jsonの設定

uniapp ナビゲーション バーの右側にあるボタンは、 で構成されていますpages.json。pages[].style.app-plus.titleNView.buttons

{
    
    
            "path": "pages/devices/Air/Air",
            "style": {
    
    
                "navigationBarTitleText": "精密空调",
                "enablePullDownRefresh": true,
                "app-plus": {
    
    
                    "bounce": "none",
                    "titleNView": {
    
    
                        "buttons": [
                            {
    
    
                                "fontSize": "15px",
                                "text": "配置"
                            },
                            {
    
    
                                "fontSize": "15px",
                                "text": "信息"
                            }
                        ],
                        "backButton": {
    
    
                            "background": "#00FF00"
                        }
                    }
                }
            }
        },

２、効果

次に、その 2 つのボタンが右上隅に表示されます

3. ボタンのクリックイベントへの応答方法

onNavigationBarButtonTapこのライフサイクル メソッドを現在のページに追加する必要があります

onNavigationBarButtonTap(event) {
    
    
    console.log('nav button pressed', event)
},

ボタンがクリックされると、クリックイベントの内容がオブジェクトの形式でこのメソッドに渡されます。

内容は以下の通りです。

使用する場合はtext一般的な判定の内容で十分です。

公式ドキュメントを参照してください:
https://uniapp.dcloud.net.cn/collocation/pages.html#app-titlenview