当您调用了 setOptionMenu
接口自定义了导航栏右上角按钮以后,点击按钮时触发该事件(optionMenu
)。
document.addEventListener('optionMenu', function (e) {
alert("option menu clicked");
}, false);
以下示例为基本功能演示:
<h1>请点击右上角菜单查看效果</h1>
<script>
function ready(callback) {
// 如果 jsbridge 已经注入则直接调用
if (window.AlipayJSBridge) {
callback && callback();
} else {
// 如果没有注入则监听注入的事件
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
ready(function() {
AlipayJSBridge.call('setOptionMenu', {
title : '按钮',
redDot : '5', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字
color : '#ffff6600', // 必须以#开始 ARGB 颜色值
});
document.addEventListener('optionMenu', function(e) {
alert("optionMenu clicked!");
}, false);
});
</script>
多个 optionMenu 情况的事件:
<h1>请点击右上角每个菜单查看效果</h1>
<script>
function ready(callback) {
// 如果 jsbridge 已经注入则直接调用
if (window.AlipayJSBridge) {
callback && callback();
} else {
// 如果没有注入则监听注入的事件
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
ready(function() {
AlipayJSBridge.call('setOptionMenu', {
// 显示的时候是从后往前显示的
menus: [{
icontype: 'scan',
redDot: '-1', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字
}, {
icontype: 'user',
redDot: '10', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字
}],
override: true //在需要设置多个 option 的情况下,是否保留默认的 optionMenu
});
// 必须强制调用一把刷新界面
AlipayJSBridge.call('showOptionMenu');
document.addEventListener('optionMenu', function(e) {
alert(JSON.stringify(e.data));
}, false);
});
</script>
optionMenu
,那么这个事件是无法被触发的,也就是说点击默认的 … 是无法触发 optionMenu
事件的。
在文档使用中是否遇到以下问题
更多建议
匿名提交