Neil_HL
Neil_HL
  • 发布:2018-12-17 15:49
  • 更新:2019-11-21 15:43
  • 阅读:19717

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,可下载体验。

11 关注 分享
Trust 花爽 mmt 1951844956@qq.com 1215910747@qq.com bryanwang123@hotmail.com 今天回复我了吗 andyzu@163.com ilijiayin 544097290@qq.com 511206878@qq.com

要回复文章请先登录注册

dingjie4324065@163.com

dingjie4324065@163.com

回复 13386199132@163.com:
请问你 H5 你是怎么解决的
2019-11-21 15:43
UchihaSasuke

UchihaSasuke

回复 13386199132@163.com:
同问
2019-11-08 11:40
13386199132@163.com

13386199132@163.com

请问这个H5的话,怎么设定
2019-10-18 10:42
112738102@qq.com

112738102@qq.com

回复 112738102@qq.com:
太感谢了,终于可以了
2019-10-09 02:01
112738102@qq.com

112738102@qq.com

回复 DCloud_heavensoft:
currentWebview.setTitleNViewButtonStyle(index,{text:‘中国’}); 必须这样才是可以的
2019-10-09 01:56
DCloud_heavensoft

DCloud_heavensoft

回复 112738102@qq.com:
本帖就是uni-app用的,是标准用法。你的代码修改范围太大,修改了整个titleNView,其实你只需要修改button文字而已,使用setTitleNViewButtonStyle即可
2019-10-09 01:33
112738102@qq.com

112738102@qq.com

uniapp这样修改不行,下面代码能修改,修改后onNavigationBarButtonTap失效,不能第二次修改 为什么呢
let pages = getCurrentPages();
let currentWebview = pages[0].$getAppWebview();
let titleNView = currentWebview.getStyle().titleNView;
// 添加文字过长截取为3个字符,请根据自己业务需求更改
titleNView.buttons[0].text = '上海';
console.log(currentWebview.getTitleNView())
currentWebview.setStyle({titleNView:titleNView});
2019-10-08 22:28
1084885499@qq.com

1084885499@qq.com

nvue页面好像不管用
2019-10-02 22:10
吃瓜哥哥

吃瓜哥哥

回复 今天回复我了吗:
可以修改了,我加你了
2019-08-29 16:17
吃瓜哥哥

吃瓜哥哥

回复 今天回复我了吗:
可以加微信吗?我私信你了
那和设计稿 不一样怎么办?
2019-08-28 17:34