当调用setOptionMenu接口,自定义了导航栏右上角按钮以后,点击按钮时触发该事件
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>
<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>