JSAPI

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