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)

参考文章

相关推荐
2501_916007473 小时前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
砺能5 小时前
uniapp生成的app添加操作日志
前端·uni-app
2501_915921438 小时前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手9 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
雪芽蓝域zzs9 小时前
uniapp 修改android包名
android·uni-app
芒果沙冰哟9 小时前
uniapp canvas实现手写签字功能(包括重签,撤回等按钮)
uni-app
爱折腾的小码农9 小时前
uni-app 小程序开发避坑:诡异的 `module ‘...‘ is not defined` 错误与我的解决方案
uni-app
Q_Q19632884759 小时前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
不知名的前端专家10 小时前
UniApp USB存储设备U盘操作、读写原生插件
uni-app
coldriversnow11 小时前
uni-app从后端返回的富文本中的视频截取一帧为封面
uni-app