Neil_HL
Neil_HL
  • 发布:2018-12-17 15:49
  • 更新:2022-06-17 18:17
  • 阅读:72377

uni-app在App端动态修改原生导航栏

分类:uni-app

在App端可以通过得到webview对象,通过当前 webview 对象的 setTitleNViewButtonBadge, setTitleNViewButtonStyle, setTitleNViewSearchInputFocus,setTitleNViewSearchInputText 分别对 TitleNView 上的按钮角标,按钮,输入框等组件的样式进行修改。

对于 searchInput 还支持: 通过 webview的getStyle(),得到一个json对象,然后用json的.来获取titleNView,拿到的还是json对象,然后修改json对象,再用webview的setstyle方法把这个json对象赋值进去。

具体实现如下:

// #ifdef APP-PLUS  
var webView = this.$mp.page.$getAppWebview();  

// 修改buttons  
// index: 按钮索引, style {WebviewTitleNViewButtonStyles }  
webView.setTitleNViewButtonStyle(0, {  
    text: 'hello',  
});  

// 修改按钮上的角标  
// index: 按钮索引, text: 角标文本内容  
webView.setTitleNViewButtonBadge({  
    index: 0,  
    text: 10,  
});  

// 设置 searchInput的 focus  
// focus: true | false  
webView.setTitleNViewSearchInputFocus(true)  

// 设置 searchInput的 text  
webView.setTitleNViewSearchInputText(text)  

// searchInput 通过 webview 的 setStyle 方法进行更新  
var tn = currentWebview.getStyle().titleNView;  
if (tn.buttons) {    
uni.getSystemInfo({    
    success:function(res){    
        if (res.platform=="ios") { // 这里在HBuilderX 1.9.9版本有个bug,searchInput的I变小写了 ,临时绕过下。更高版本会修复此bug    
            tn.searchinput.placeholder = 'test';    
            currentWebview.setStyle({    
                titleNView: tn    
            });    
        } else{    
            tn.searchInput.placeholder = 'test'; //这里有个已知bug,HBuilderX 1.9.9上,当searchInput位于首页时,动态设置placehold会导致buttons的点击事件消失。更高版本会修复此bug    
            currentWebview.setStyle({    
                titleNView: tn    
            });    
        }    
    }    
})    
}    

// #endif

参考这个原理,可以任意修改titleNView的所有内容,titleNView的style内容详见:
https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

button的相关属性参考:http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewButtonStyles

searchInput的相关属性参考:https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewSearchInputStyles

附件为测试buttons的demo,可下载体验。

20 关注 分享
Trust 以何为家 mmt 1***@qq.com 1***@qq.com b***@hotmail.com 今天回复我了吗 a***@163.com ilijiayin 5***@qq.com 5***@qq.com lhyh 睡不醒哎 王利东 2***@qq.com rysnone 2***@qq.com m***@foxmail.com 1***@qq.com chihiro_yy

要回复文章请先登录注册

一只会飞的鸟

一只会飞的鸟

nvue怎么监听tags里面的input呀,输入完成事件
2022-06-17 18:17
一只会飞的鸟

一只会飞的鸟

nvue怎么监听tags里面的input呀,输入事件
2022-06-17 18:16
庞镕华

庞镕华

回复 DCloud_heavensoft :
nvue下如何更改自定义按钮的默认颜色,https://ask.dcloud.net.cn/question/145077 默认是白色,目前多次测试无效
2022-05-15 14:30
水车

水车

回复 水车 :
在setStyle中可以修改pages.json中所有的配置项。其次,官方文档中关于webviews的配置不全,其实pages.json中可以配置的内容有很多,比如:
原生导航栏的padding属性,可以直接配置
2022-05-14 00:44
水车

水车

vue3写法: [更多内容](https://www.cnblogs.com/shuiche/p/16188510.html)

```
// #ifdef APP-PLUS
var pages = getCurrentPages()
var page = pages[pages.length - 1]
var currentWebview = page.$getAppWebview() // 页面栈最顶层就是当前webview
var nb = currentWebview.getStyle()
console.log(nb)
// 设置样式、内容等
// var nb = currentWebview.setStyle({
// ...
// })
// #endif
```
2022-05-14 00:41
Firstmeet初见

Firstmeet初见

> 动态修改原生搜索框值的方法

```
// #ifdef APP-PLUS
var webView = this.$mp.page.$getAppWebview();
webView.setTitleNViewSearchInputText(keyword)
// #endif

// #ifdef H5
var searchInputDom = document.querySelector(".uni-input-input[type=search]");
var evt = new UIEvent('input', {
bubbles: false,
cancelable: false
});
searchInputDom.value = keyword;
searchInputDom.dispatchEvent(evt);
// #endif
```
2021-12-09 14:46
7***@qq.com

7***@qq.com

请问下怎么修改搜索框的宽和高啊
2021-08-29 12:38
杨敬闯

杨敬闯

回复 m***@163.com :
https://ask.dcloud.net.cn/question/126898
这是我的提问
2021-07-23 10:22
杨敬闯

杨敬闯

回复 m***@163.com :
大佬,我是想更换下搜索框的 placeholder,这个可以吗?
2021-07-23 10:21
m***@163.com

m***@163.com

回复 杨敬闯 :
document.getElementsByClassName('uni-btn-icon')[1].innerHTML='导航栏标题'
2021-07-16 09:42