技术干货 | jsAPI 方式下的导航栏的动态化修改
简介:操作指导:通过 jsAPI 实现导航栏的动态修改。
很多开发同学在接入 H5 容器后都会对容器的导航栏进行深度定制,除了 Native 的定制化之外,还有很多场景是使用到 jsAPI 的方式,通过 jsAPI 实现导航栏的动态修改。
本文旨在通过实际场景的描述,通过 jsAPI 的方式,介绍 jsAPI 下怎样动态修改导航栏,供各位 mPaaS Coder 参考使用。
延伸阅读:技术干货 | Native 页面下如何实现导航栏的定制化开发?
内置 jsAPI 修改导航栏
1.修改导航栏标题
修改导航栏标题API:setTitle
AlipayJSBridge.call('setTitle', {title: 'H5设置标题',});
AlipayJSBridge.call('setTitle', {subtitle: '副标题',
});
AlipayJSBridge.call('setTitle', {title: '标题',subtitle: '副标题',
});
2.修改导航右按钮
setOptionMenu 此 API 有 reset、title、icontype、icon 这 4 个属性有一个即可,属性的优先级:reset > title > icontype > icon。
AlipayJSBridge.call('setOptionMenu', {title : '按钮',redDot : '5', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字color : '#9951ffee', //字体颜色,必须以#开始 ARGB 颜色值
});
AlipayJSBridge.call('showOptionMenu');//强制刷新显示
AlipayJSBridge.call('setOptionMenu', {icon : 'https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png',redDot : '6', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字
});
AlipayJSBridge.call('showOptionMenu');//强制刷新显示
AlipayJSBridge.call('setOptionMenu',{// 显示时的顺序为从右至左menus: [{icontype: 'scan',},{icontype: 'add',}],override: true // 在需要设置多个 option 的情况下,是否保留默认的 optionMenu
});
AlipayJSBridge.call('showOptionMenu');//强制刷新显示
AlipayJSBridge.call('hideOptionMenu');//隐藏右侧按钮
3.修改导航栏背景色
修改设置导航栏背景色 setTitleColor API,参数 color、reset、resetTransparent。优先级 reset > color > resetTransparent。
window.AlipayJSBridge && AlipayJSBridge.call("setTitleColor", {color: 16118569,reset: false // (可选,默认为 false,true 恢复默认导航栏颜色title 等,color等于无效)
});
window.AlipayJSBridge && AlipayJSBridge.call("setTitleColor", {reset: true // (可选,默认为 false,true 恢复默认导航栏颜色title 等,color等于无效)
});
AlipayJSBridge.call("setTitleColor", {resetTransparent: true // 设置导航栏透明
});
注:此 jsAPI 设置背景色后会影响导航标题和按钮颜色,需要在自定义插件中监听kH5Event_Scene_NavigationBar_ChangeColor 并在监听事件中实现代码:
//禁止修改容器默认导航栏样式
[event stopPropagation];
4.其他修改
(1)显示标题栏加载 loading
AlipayJSBridge.call('showTitleLoading');
(2)隐藏标题栏加载 loading
AlipayJSBridge.call('hideTitleLoading');
展示效果:
自定义 jsAPI 修改导航栏
1.创建自定义 jsAPI
(1)创建 jsAPI 类:必须继承自 PSDJsApiHandler 基类。
(2)为与容器默认提供的插件命名保持一致,创建的 jsAPI 类命名以 XXJsApi4 开头,其中 XX 为自定义的前缀。
(3)在 .m文件中,需重写方法 -(void)handler:context:callback:。当在 H5 前端调用此 jsAPI 时,会转发到此方法。
2.注册 jsAPI
(1)在自定义的 Plist 文件中注册此 jsAPI。
(2)在 JsApis 数组下注册上一步创建的 jsAPI 类,注册的 jsAPI 是一个字典类型,包含以下两项内容,Key 分别为:jsApi 和 name。
名称 | 含义 |
---|---|
jsAPI | 在 H5 页面中调用的 jsAPI 接口名。注意: 为防止自定义的 jsAPI 与容器内置 jsAPI 相互影响导致不可用,请给自定义 jsAPI 名加上前缀予以区分。 |
name | 创建的 jsAPI 的类名。 |
3.自定义 jsAPI代码实现
(1)H5 前端代码参考:
function setNativeTitle() {my_jsapi_call("setNativeTitle",{'title':'主题'});
}function my_jsapi_call(apiName,params) {window.AlipayJSBridge && AlipayJSBridge.call(apiName,params,function(data){alert('调用结果'+JSON.stringify(data));});
}
(2)原生端代码参考:
- (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSDJsApiResponseCallbackBlock)callback {[super handler:data context:context callback:callback];NSLog(@"+++++++%@",data);NSString *string = data[@"title"];//获取当前H5容器vc,通过VC内自定义修改导航栏YXH5WebVC *vc = (YXH5WebVC *)DTContextGet().currentVisibleViewController;vc.barView.title = string;
}
本文作者:阿里云 mPaaS TAM 团队(御雪 荣阳)
mPaaS 最新折扣资讯
【隐私合规检测飞天会员八折专享】助力客户防范监管处罚及通过应用市场审核上架。点击了解更多
原文链接:https://developer.aliyun.com/article/794168?
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
技术干货 | jsAPI 方式下的导航栏的动态化修改相关推荐
- html css 导航 左右滑动效果代码,HTML+CSS/CSS3实现滑动下拉导航栏
HTML+CSS/CSS3实现滑动下拉导航栏 纯css实现的滑动下拉导航栏,超详细代码,以及实现中遇到的小问题 首先创建一个列表以及一些标签的全局样式 html代码 css代码 * { margin: ...
- 宽高自适应下的导航栏文本居中
导航栏是网页中必不可少的一部分,固定的宽高可以直接写给元素,但是不同的分辨率之下,可能会出现滚动条或者空白,所以就需要使用宽高自适应的方式,让导航栏更加灵活的适应网页. 例: 导航栏 宽1000px ...
- 20220414在MT6739的Android10系统下开启导航栏NavigationBar(虚拟按键)
20220414在MT6739的Android10系统下开启导航栏NavigationBar(虚拟按键) 2022/4/14 18:00 导航栏NavigationBar 1.源码部分: framew ...
- html5 导航栏颜色怎么修改
HTML5导航栏颜色的修改可以通过CSS来实现.可以在HTML文件中的head部分添加一个style标签,然后使用CSS选择器选中导航栏的元素,修改其背景颜色. 例如,下面的代码将导航栏的背景颜色改为 ...
- 怎么在html5中制作下拉导航栏,在PPT中制作下拉式导航菜单效果的方法
为了提高PPT演示文稿的观赏性,用户可能希望在PPT幻灯片中添加下拉式导航菜单效果,通过该导航菜单在不同幻灯片间进行导航(如图1所示),制作下拉式导航菜单的具体操作步骤如下. 图1 下拉式导航菜单 ( ...
- html 下拉导航栏源码,html导航栏下拉菜单怎么制作?这里有详细的代码实例
元素来包裹这些元素,并使用CSS来设置下拉内容的样式. html导航栏菜单的CSS部分: .dropdown类使用position:relative,这将设置下拉菜单的内容放置在下拉按钮(使用posi ...
- 使用 CSS 创建下拉导航栏
下拉菜单有一个可以通过单击选择的项目列表.我们可以使用 HTML 元素和 CSS 创建一个下拉列表.所以,让我们学习创建一个下拉菜单. 创建下拉列表 可以使用<div>容器和<but ...
- word导航栏 字体大小修改
这个字体大小对应windows系统文本的大小,所以只能把系统里的文本统一修改,所以修改得慎重! https://zhidao.baidu.com/question/130894027743374401 ...
- 使用图片方式自定义iOS导航栏navigationItem的backBarButtonItem
2019独角兽企业重金招聘Python工程师标准>>> 在做ViewControlller的navigationItem时,我们经常需要使用自定义的图片来替换系统默认的按钮样式,这点 ...
最新文章
- 重构代码(应如写诗)
- 通过pxe远程安装linux,通过PXE远程安装多台Linux系统
- Centos6.5 安装Vim7.4
- 3-34Pytorch与nn库
- java与C++不同之处(java不支持特性)
- BERT-BiLSTM-CRF基于BERT预训练的中文命名实体识别TensorFlow实现
- codeforces 701A A. Cards(水题)
- DevExpress WinForm 控件汉化方法 代码(一)
- 微信小程序开发者文档教程,从入门到精通 (附超过100个完整项目源代码、文档)
- a标签下载pdf文件
- 搭建php程序之Linux 安装PHP集成环境宝塔面板
- 单包授权(spa)简介
- 机械硬盘显示数据错误循环冗余检查文件如何寻回
- 台式电脑如何修复计算机,大神告诉你电脑不断重启如何修复
- kali linux的详细安装
- 软件工程师的核心竞争力是什么-笔记
- linux教程deepin,国产系统Linux Deepin 2014详细评测
- 关于128X8静态存储器芯片设计(转)
- .Net高并发解决思路【转载】
- DO-178C系列标准
热门文章
- linux 配置jupyter远程访问
- 提交自己开发的MR作业到YARN上运行的步骤
- 向xxxhub发了一个数据包,发现了···
- 最好用的 Python 虚拟环境,没有之一
- 强势回归!比 Python 快 20% 的 Pyston v2.0 来了!
- GitHub 4.6 万星:Windows Terminal 预览版开放下载!
- echarts formatter_vue使用echarts的方法
- python里orient_从Python访问OrientDB
- c语言程序中的错误可分为,《C语言程序设计(本)》模拟试卷1.doc
- tcp_nodelay memcached java_TCP_NODELAY 和 TCP_NOPUSH