Neil_HL
Neil_HL
  • 发布:2018-12-17 15:49
  • 更新:2021-01-07 20:29
  • 阅读:48243

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

18 关注 分享
Trust 以何为家 mmt 1951844956@qq.com 1215910747@qq.com bryanwang123@hotmail.com 今天回复我了吗 andyzu@163.com ilijiayin 544097290@qq.com 511206878@qq.com lhyh 309834585@qq.com 王利东 270635897@qq.com 307675141@qq.com 291871909@qq.com mr_jhc@foxmail.com

要回复文章请先登录注册

646400650@qq.com

646400650@qq.com

```
let pages = getCurrentPages();
let page = pages[pages.length - 1];
let currentView = page.$getAppWebview();
data: {
return {
isedit: false
}
}
onNavigationBarButtonTap(e) {
this.isedit= !this.isedit;
currentView.setTitleNViewButtonStyle(e.index, {
text: this.isEditFile ? '编辑' : '完成'
})
}
```
只有一个编辑按钮,当我离开页面再次进入页面的时候修改就失效了
2021-01-07 20:29
glforgod@qq.com

glforgod@qq.com

titleText 修改不生效
2020-11-19 16:47
菜鸟一枚2号

菜鸟一枚2号

app端,动态设置buttons的width时,添加onckick事件无效
2020-10-28 14:52
1096256694@qq.com

1096256694@qq.com

//searchInput 通过 webview 的 setStyle 方法进行更新
这里的案例有问题 按钮点击事件会出问题
用这种按钮点击事件正常
var webView = this.$mp.page.$getAppWebview();
webView.setStyle({
titleNView: {
searchInput: {
placeholder: “text”
}
}
});
2020-09-16 21:27
未寒已凉

未寒已凉

回复 jiang2266028 :
你好,动态判断顶部消息红点显示,你解决了吗
2020-08-18 10:39
hengandy@vip.qq.com

hengandy@vip.qq.com

怎么修改导航栏上的输入框文字颜色
2020-07-15 18:29
风云杭州

风云杭州

回复 309834585@qq.com :
webView =plus.webview.currentWebview();
2020-06-13 17:45
风云杭州

风云杭州

回复 309834585@qq.com :
我也想知道
2020-06-13 17:44
jiang2266028

jiang2266028

您好,我想问下,动态判断顶部消息红点,怎么修改圆点样式redDot
2020-04-09 16:11
309834585@qq.com

309834585@qq.com

回复 yupu68@sina.com :
const pages = getCurrentPages();
const page = pages[pages.length - 1];
let titleNView = page.$getAppWebview().getTitleNView();
nvue 这么获取 titleview
2020-03-18 14:08