optionMenu 点击右上角按钮

优质

小牛编辑

131浏览

2023-12-01

Since 8.0

optionMenu

当调用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>

查看演示扫码查看用支付宝扫码运行

多个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事件的。