uniapp在App端如何动态修改原生导航栏？

Smile_ping2023-10-21 19:00

uniapp在App端如何动态修改原生导航栏？

文章目录

- uniapp在App端如何动态修改原生导航栏？
- - page.json配置
  - [修改 buttons 文字](#修改 buttons 文字)
  - 修改按钮上的角标
  - [设置 searchInput的 focus](#设置 searchInput的 focus)
  - [设置 searchInput的 text](#设置 searchInput的 text)
在App端可以通过得到 webview 对象，通过当前 webview 对象的 setTitleNViewButtonBadge， setTitleNViewButtonStyle， setTitleNViewSearchInputFocus，setTitleNViewSearchInputText 分别对 TitleNView 上的按钮角标，按钮，输入框等组件的样式进行修改。

page.json配置

举个例子，这里配置基本 buttons，根据需要自行配置，具体查看官方文档

json 复制代码

{
    "path": "pages/devices/devices",
    "style": {
        "navigationBarTitleText": "Device",
        "enablePullDownRefresh": true,
        "app-plus": {
            "titleNView": {
                "buttons": [{
                    "text": "Search",
                    "color": "#fff",
                    "fontSize": "18",
                    "width": 80,
                    "float": "right"
                }]
            }
        }
    }
},

修改 buttons 文字

javascript 复制代码

// #ifdef APP-PLUS
var webView = this.$mp.page.$getAppWebview();
changeNavButtonText(text) {
    // 0：按钮索引(index)
    webView.setTitleNViewButtonStyle(0, {
        text: text
    });
}
// #endif

修改按钮上的角标

javascript 复制代码

// index: 按钮索引, text: 角标文本内容
changeNavButtonBadge() {
    webView.setTitleNViewButtonBadge({
        index: 0,
        text: 99,
    });
}

设置 searchInput的 focus

javascript 复制代码

// focus: true | false  
webView.setTitleNViewSearchInputFocus(true)

设置 searchInput的 text

javascript 复制代码

webView.setTitleNViewSearchInputText(text)

参考文章