Neil_HL
Neil_HL
  • 发布:2018-12-17 15:49
  • 更新:22 小时前
  • 阅读:11896

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

7 关注 分享
Trust 花爽 mmt 1951844956@qq.com 1215910747@qq.com bryanwang123@hotmail.com asdadad啊的

要回复文章请先登录注册

asdadad啊的

asdadad啊的

请问下 在searchInput中 最后边可否加个X的标识,来制作情况输入的需求
22 小时前
907563176@qq.com

907563176@qq.com

nvue组件下怎么设置
2019-08-12 18:08
sqyambition@qq.com

sqyambition@qq.com

回复 sqyambition@qq.com:
<p>esfdsdfb</p>
2019-07-31 11:01
sqyambition@qq.com

sqyambition@qq.com

```<p> ```
2019-07-31 11:00
2902216407@qq.com

2902216407@qq.com

回复 2902216407@qq.com:
打错了,sorry,是改变了按钮的text后,按钮事件获取e.text的还是之前的text文字,没有变怎么破???
2019-07-28 22:27
2902216407@qq.com

2902216407@qq.com

改变后按钮字体后,按钮事件获取e.text的还是之前的,没有变怎么破???
2019-07-28 18:23
yq330161646@outlook.com

yq330161646@outlook.com

大神 如何设置 搜索栏 文字颜色, 接口好像只能改占位符的颜色
2019-07-23 16:38
Alaric

Alaric

设置按钮背景色为透明后,动态修改buttons后图标颜色变白,如何保持设置的颜色,求解!
2019-06-28 09:19
672279170@qq.com

672279170@qq.com

var webview = this.$mp.page.$getAppWebview(); webview改为 webView ; 另外问一下大佬,.$mp的API你在哪看到的? 有文档吗?
2019-06-19 18:47
672279170@qq.com

672279170@qq.com

感谢分享,好人一生平安.
2019-06-19 18:43
15093568689@163.com

15093568689@163.com

代码引入进入后,进这个页面就app闪退
2019-06-19 09:56
1065245635@qq.com

1065245635@qq.com

回复 江water:
条件编译 这个$getAppWebview只有APP才可以
2019-06-18 10:22
loquy

loquy

index.umd.min.js:1 [system] errorHandler TypeError: page.$getAppWebview is not a function
2019-06-15 14:08
1046865524@qq.com

1046865524@qq.com

回复 java8dj@163.com:
感谢
2019-06-06 17:01
1046865524@qq.com

1046865524@qq.com

修改了按钮内容之后onNavigationBarButtonTap点击事件无效,求解,顶我上去
2019-06-06 14:37
2687308317@qq.com

2687308317@qq.com

var pages = getCurrentPages();
var page = pages[pages.length - 1];
var currentWebview = page.$getAppWebview();
currentWebview.setTitleNViewButtonStyle(0, {
text: ''hello"
});
设置成功
2019-06-05 16:29
DCloud_heavensoft

DCloud_heavensoft

回复 SimpleJalon:
已更新
2019-06-03 20:54
SimpleJalon

SimpleJalon

你这个修改buttons的方案有问题,详情查看 https://ask.dcloud.net.cn/question/72091 反馈的BUG
2019-06-01 21:10
java8dj@163.com

java8dj@163.com

按钮事件失效解决方案:
currentWebview.setTitleNViewButtonStyle(0, {text:"hi"})
用这句设置新文字
官方文档:
http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.setTitleNViewButtonStyle
2019-05-22 17:30
江water

江water

报错 page.$getAppWebview is not a function
2019-05-15 18:42
1246652557@qq.com

1246652557@qq.com

Ctyuh
2019-05-14 12:46
fir512@126.com

fir512@126.com

回复 buluo05@163.com:
可以给个属性”width”:"auto"试试
2019-05-09 18:36
2447220747@qq.com

2447220747@qq.com

回复 Neil_HL:
你好,我复制了你的代码,也是只改了这一个属性,可以成功修改,但是这之后就监听不到onNavigationBarButtonTap(){}事件了,请问能是我操作的问题吗?
2019-04-30 17:06
灵凌

灵凌

回复 1206188300@qq.com:
找到解决办法了么?
2019-04-27 23:23
Neil_HL

Neil_HL (作者)

回复 2845957073@qq.com:
document获取节点改变文字
2019-03-12 10:28
2845957073@qq.com

2845957073@qq.com

请问一下,h5平台下是如何实现修改标题栏按钮文字呢?
2019-03-12 09:11
mmt

mmt

fork
2019-03-11 15:46
贰大的

贰大的

回复 Neil_HL:
忘记说平台了 ios平台 onload后获取不到 安卓平台没问题
2019-03-11 15:42
贰大的

贰大的

回复 Neil_HL:
我试试了好像是空的 只有触发点击事件才能获取到!
2019-03-11 14:33
Neil_HL

Neil_HL (作者)

回复 buluo05@163.com:
试试设置width属性
2019-03-11 10:45
Neil_HL

Neil_HL (作者)

回复 贰大的:
可以页面加载完成就获得,这里只是提供一种场景
2019-03-11 10:44
贰大的

贰大的

你好,请问为什么一定要点击才能获取到button对象,不能页面加载完就获取到吗?
2019-03-11 10:32
buluo05@163.com

buluo05@163.com

我自定义按钮的文字是4个字的,例如"找人代付",安卓手机12px下只能显示两个半字,有没有解决方法
2019-01-14 10:09
Neil_HL

Neil_HL (作者)

回复 1206188300@qq.com:
你需要向我那样修改,只改变某一个属性,如果整个节点都改了,事件就不会被监听到了
2018-12-20 11:07
1206188300@qq.com

1206188300@qq.com

自定义了以后,onNavigationBarButtonTap(){}事件,监听不到标题栏上按钮点击事件了,请问这个问题可以解决吗?
2018-12-19 20:11