作者: 浏览量:236 更新时间: 2020.08.07
此接口用于设置标题栏右边的按钮属性。仅负责设置,该按钮的显示需要额外调用 showOptionMenu。
注意:由于苹果的 ATS 限制,icon URL 必须为 https 链接或 base64,而 http 链接会被忽略。
AlipayJSBridge.call('setOptionMenu', {title : '按钮', // 与 icon、icontype 三选一redDot : '-1', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字color : '#ff00ff00', // 必须以 # 开始 ARGB 颜色值});
设置各种类型的右侧按钮:
<h1>点击以下按钮看不同效果</h1><a href="javascript:void(0)" class="btn button">单按钮</a><a href="javascript:void(0)" class="btn icon">单图标</a><a href="javascript:void(0)" class="btn menu">多菜单(9.9.3)</a><a href="javascript:void(0)" class="btn reset">重置</a><a href="javascript:void(0)" class="btn hide">隐藏</a><a href="javascript:void(0)" class="btn show">显示</a><script>function ready(callback) {// 如果 jsbridge 已经注入则直接调用if (window.AlipayJSBridge) {callback && callback();} else {// 如果没有注入则监听注入的事件document.addEventListener('AlipayJSBridgeReady', callback, false);}}ready(function(e) {document.querySelector('.button').addEventListener('click', function() {AlipayJSBridge.call('setOptionMenu', {title : '按钮',redDot : '5', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字color : '#ff00ff00', // 必须以#开始 ARGB 颜色值});AlipayJSBridge.call('showOptionMenu');});document.querySelector('.icon').addEventListener('click', function() {AlipayJSBridge.call('setOptionMenu', {icon : 'http://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png',redDot : '-1', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字});AlipayJSBridge.call('showOptionMenu');});document.querySelector('.menu').addEventListener('click', function() {AlipayJSBridge.call('setOptionMenu', {// 显示时的顺序为从右至左menus: [{icontype: 'scan',redDot: '-1', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字}, {icontype: 'user',redDot: '-1', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字}],override: true // 在需要设置多个 option 的情况下,是否保留默认的 optionMenu});// 必须强制调用一次以刷新界面AlipayJSBridge.call('showOptionMenu');});document.querySelector('.reset').addEventListener('click', function() {AlipayJSBridge.call('setOptionMenu', {reset: true,});AlipayJSBridge.call('showOptionMenu');});document.querySelector('.show').addEventListener('click', function() {AlipayJSBridge.call('showOptionMenu');});document.querySelector('.hide').addEventListener('click', function() {AlipayJSBridge.call('hideOptionMenu');});document.addEventListener('optionMenu', function(e) {alert(JSON.stringify(e.data));}, false);});</script>
reset、title、icontype、icon 这 4 个属性有一个即可,属性的优先级:reset > title > icontype > icon。
AlipayJSBridge.call('setTitle',{title, icon, redDot, reset, color, override, menus, icontype})
| 名称 | 类型 | 描述 | 必选 | 默认值 |
|---|---|---|---|---|
| title | string | 右按钮文字。 | Y | “” |
| icon | string | 右按钮图标 URL,base64(since 9.0)。 8.3 及以前:iOS 40x40(周边不留白), Android 50x50(四边各透明留白 5px)。 8.4 及以后:两个平台统一使用 40x40(周边不留白)。 |
Y | “” |
| redDot | string | 红点数值。 | N | “” |
| reset | bool | 重置到系统默认,当 reset=true 时,忽略其他参数。 | Y | false |
| color | string | 文字颜色值。 | N | “#FFFFFFFF” |
| override | bool | 在需要设置多个 option 的情况下,是否保留默认的 optionMenu。 | N | false |
| menus | array | 设置多个按钮。 | N | [ ] |
| preventDefault | bool | 是否阻止默认的分享功能(默认是弹分享框)preventDefault=true 会阻止默认的分享。 | N | [ ] |
| icontype | string | 根据图片类型加载容器预置图片,与 title、icon 三选一。 注意: 只支持单个 optionMenu 变色。 具体类型包含: user(账户)、filter(筛选器)、search(查找)、add(添加)、settings(设置)、scan(扫一扫)、info(信息)、help(帮助)、locate(定位)、more(更多)、mail(邮箱 10.0.8 及以上)。 |
N | “” |
| contentDesc | string | 设置盲人模式阅读文案。 | N | “” |
setOptionMenu 后如果效果不对,请调用一次 showOptionMenu。
工作时间5-10分钟将由1对1顾问为您提供尊享服务