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

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

文章目录

  • 在App端可以通过得到 webview 对象,通过当前 webview 对象的 setTitleNViewButtonBadgesetTitleNViewButtonStylesetTitleNViewSearchInputFocussetTitleNViewSearchInputText 分别对 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)

参考文章

相关推荐
居安思危_Ho3 小时前
RK平台Uniapp自启动缓存问题解决
android·缓存·uni-app·rk平台·uniapp资源文件
你真的可爱呀5 小时前
uniapp学习【项目创建+项目结构解析】
学习·uni-app
小小弯_Shelby5 小时前
uniApp App内嵌H5打开内部链接,返回手势(左滑右滑页面)会直接关闭H5项目
前端·uni-app
卷Java5 小时前
百度AI车牌识别配置指南
java·开发语言·百度·uni-app·dubbo·微信公众平台
游戏开发爱好者87 小时前
苹果iOS26系统升级:液态玻璃与智能功能全解析
macos·ios·小程序·uni-app·objective-c·cocoa·iphone
2501_9159184114 小时前
iOS 26 App 性能测试|性能评测|iOS 26 性能对比:实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
用户904706683571 天前
uniapp Vue3版本,用pinia存储持久化插件pinia-plugin-persistedstate对微信小程序的配置
前端·uni-app
乔冠宇1 天前
uniapp创建ts项目tsconfig.json报错的问题
uni-app
细节控菜鸡1 天前
【2025最新】uniapp 中基于 request 封装实现多文件上传完整指南
uni-app
fakaifa1 天前
【全开源】企业微信SCRM社群营销高级版系统+uniapp前端
uni-app·开源·企业微信·scrm·源码下载·企业微信scrm