点击右上角按钮

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，是无法触发 optionMenu 事件的。