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)

参考文章

相关推荐
阿伟来咯~1 小时前
一些 uniapp相关bug
uni-app·bug
瑶琴AI前端5 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen8685 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
尚梦13 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
尚学教辅学习资料20 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie23420 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq22951165021 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165022 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app
qq22951165022 天前
微信小程序 uniapp+vue老年人身体监测系统 acyux
vue.js·微信小程序·uni-app
摇头的金丝猴2 天前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts