全部产品
云市场

点击右上角按钮

更新时间:2019-09-12 17:15:48

当您调用了 setOptionMenu 接口自定义了导航栏右上角按钮以后,点击按钮时触发该事件(optionMenu)。

optionMenu 接口使用方法

  1. document.addEventListener('optionMenu', function (e) {
  2. alert("option menu clicked");
  3. }, false);

代码示例

  • 以下示例为基本功能演示:

    1. <h1>请点击右上角菜单查看效果</h1>
    2. <script>
    3. function ready(callback) {
    4. // 如果 jsbridge 已经注入则直接调用
    5. if (window.AlipayJSBridge) {
    6. callback && callback();
    7. } else {
    8. // 如果没有注入则监听注入的事件
    9. document.addEventListener('AlipayJSBridgeReady', callback, false);
    10. }
    11. }
    12. ready(function() {
    13. AlipayJSBridge.call('setOptionMenu', {
    14. title : '按钮',
    15. redDot : '5', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字
    16. color : '#ffff6600', // 必须以#开始 ARGB 颜色值
    17. });
    18. document.addEventListener('optionMenu', function(e) {
    19. alert("optionMenu clicked!");
    20. }, false);
    21. });
    22. </script>
  • 多个 optionMenu 情况的事件:

    1. <h1>请点击右上角每个菜单查看效果</h1>
    2. <script>
    3. function ready(callback) {
    4. // 如果 jsbridge 已经注入则直接调用
    5. if (window.AlipayJSBridge) {
    6. callback && callback();
    7. } else {
    8. // 如果没有注入则监听注入的事件
    9. document.addEventListener('AlipayJSBridgeReady', callback, false);
    10. }
    11. }
    12. ready(function() {
    13. AlipayJSBridge.call('setOptionMenu', {
    14. // 显示的时候是从后往前显示的
    15. menus: [{
    16. icontype: 'scan',
    17. redDot: '-1', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字
    18. }, {
    19. icontype: 'user',
    20. redDot: '10', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字
    21. }],
    22. override: true //在需要设置多个 option 的情况下,是否保留默认的 optionMenu
    23. });
    24. // 必须强制调用一把刷新界面
    25. AlipayJSBridge.call('showOptionMenu');
    26. document.addEventListener('optionMenu', function(e) {
    27. alert(JSON.stringify(e.data));
    28. }, false);
    29. });
    30. </script>

注意事项

假如没有设置过 optionMenu,那么这个事件是无法被触发的,也就是说点击默认的 是无法触发 optionMenu 事件的。