Alipay JSSDK V3.1.1

ap.showPopMenu(OPTION | items, CALLBACK)

显示导航栏右上角弹出的下拉菜单。可直接传入一个数组作为 OPTION.items 参数。

OPTION 参数说明

名称类型必填描述
itemsObject Array菜单数组,数组中每个项是一个对象(也可以是一个字符串,如果是字符串,会当作 item.title 参数)。item 的具体配置字段见下表

items 配置项参数说明:

名称类型必填描述
titleString菜单标题,可直接作为 items 数组元素。
iconString菜单图标,支持 base64
badgeString菜单红色气泡,默认 -1。其中 0 表示小红点,-1 表示不显示,其他值展示出来

CALLBACK 参数说明

点击弹出菜单项时调用

名称类型描述
indexNumber被点击的菜单项的索引,从0开始

代码示例

<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>

<button id="J_btn_popMenu" class="btn btn-default">显示 popMenu</button>
<button id="J_btn_popMenuIcon" class="btn btn-default">显示带图标的 popMenu</button>
<script>
  var btnPopMenu = document.querySelector('#J_btn_popMenu');
  var btnPopMenuIcon = document.querySelector('#J_btn_popMenuIcon');

  btnPopMenu.addEventListener('click', function(){
    ap.showPopMenu(['菜单一', '菜单二', '菜单三'], function(res){
      ap.showToast('你点击了第 ' + res.index + ' 个菜单');
    });
  });
  btnPopMenuIcon.addEventListener('click', function(){
    ap.showPopMenu({
      items: [
        {
          title: '周边美食',
          icon: 'https://zos.alipayobjects.com/rmsportal/mzorSIxVEdkTuxumzzau.png'
        },
        {
          title: '购物攻略',
          icon: 'https://zos.alipayobjects.com/rmsportal/UoBNIZJosEXNQtAxCEUg.png'
        },
        {
          title: '摄影技巧',
          icon: 'https://zos.alipayobjects.com/rmsportal/QJeWMNUFFiDCQawMLPTr.png'
        },
        {
          title: '搞笑段子',
          icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAQlBMVEUAAAC/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7++vr6/v78Ycp3SAAAAFXRSTlMAEPAwwCDQYEDgsIBwkJ+gf1CPb09zkeEOAAAFLUlEQVR42rzZ25KrIBAF0M0dFWM02f//qyeTmgpliaj05KzXaGgutjTikIGAg5iaIRAjpOIAgSQPIE0QGAdIDRYCdoSU1RDQFlKkQTNDQiiSAc0CGSGTSMEqnMgEmZ7s0Kwje8iQgkVg+AKRmRSM4sCXGRITXzwaeb5MEFCaPxyaOP7QEAh8G9Fk5FtAO0tJJzTfLJo5/poFw0c6QRL41TUmAeEQRH6klhz6EdFEeX5o1fAAfXRK2j7pDS4x67sbInCeKzrigqi50hlco27c6N3p4Htu3BzOMzfNklvECfHGEn0zOEUFz13dw6HKPTru8kHhgAs9D/iH22/d80AfKj2Ii+cp3fLcdEU9l46n+HssxP5cLC/xSzD4ZcLieYldng7Z3LOJnRWgZssm/QxkJvX62u0p4iOmnlfoPhhsmXR2DYwRG3E8uwaSwS6X/HHru/eb4xh8cjjgUuVfdG59LwZdiT23Xhen+rKp20slU8R5rhDC5GR3S9+GBhcYzRXvBPuB3H5zBL5tR9Kt22+PoFOSquBtaKzLhJWBlXRBafGuGFHUhZA3xc18fU/s4uN+f0RXHwIvrw0nFKiHz3uUYoSTvDZUfDOFX+6azPS9EIKpDJ/sfCBv++uFQ5eHTzQHY+Uhz/Rcrs8DIJ0Dc9i+t8VkZfii/v6UTHmu9ApQI6nVF07JhsIkTlzpP1nLFq4cIBO3pbnjmstZK25L9Pj3Z8U91/KV9IWzYinLcm7I1KexbbDaQ2q05eyYhXwiwvT33wvSVJuBvFdwuvTiG4e//2ZkubE846KLB3pphpQKm2e7ZvvVTCxijVXb74ZyghH4CssKje/rWWHxfYEVCd+nWGEgIZ8Dj//BcVeEkAv/irWzXUlBIACgxV6AoN331v//6nQnMzEGLFAkcx59EOICtZA9EVmduYreeuMTFC5rS0Qy/Cg4g/5YTVNs0liSBurUZol2HvkCb7uyqSTVqO7KazC9N5VFjZmNiksm1+/LBLp8mZvPC8rh6YRU1TyufwoiHjOjKNjhS1IUKcTVKSx2r73Vh2elIoO4PAUwuMS4oGEePsOwi9tYy0Nlals7l3f+r+T/O54oNri27ExzLaVejnkDDPv+RajComfBC2yUxZM6b18/iD/bV9CSrvKNT2C+PQH9T7A2AU9T+fYEAk2UiidQfgPR0SxS6fpCQAfqJWkKrxY6OBREdxqUpAmsEPJ44SzZWUAkepqMAOEshIzlVq0sPUobgBcdxb1zWlsjF0mPka9aLIvnu2EuWk9Dkiiri8cSpq1vVCZJGrRHa4FLo9LZVimipyH+XwyR2ZgMmc16Dy9GGuS5kUZ4Lm42S7g1umNDHl+0uLjIXbhwf/Ry/LIRZ9q5g3Brb38+vUS7pmGK9lTJlSfdY7DE0CF+Bz/KPZm0o5o31Bh8xZj0QYwR6+0zoanG9VXfrIFBKKnG99aepIMhb6pzUPDMNnIXeqrzl8pvm4BbTOBykpJn19PLzHa1moZ0TrJP4XJ2jFCViJN/oZdwmjiJqX5x/FtBh99MPC+YHh2nKPOVcNPUhHAqUQcZNoeidpZAU4/En1vpJfXHe/vIWmtL3bxonH2ZTCpgKZpMQYOjqRw0LTTRAh1WmmaFLokmSQN9qenvf/7fKNXVs3zjRk70iZUetQq4ynl6jHfQxPYkxvPjgaBuWDBwH1oaZBHGODs0vINxapV0i1wVPIQPMvn+yrg75SKZDDxOLZq66KhgFoyrJoZdIwqYTeESo/6gv/RHigsquO4PrWwzz9ROC40AAAAASUVORK5CYII=',
          badge: '0'
        }
      ]
    }, function(res){
      ap.showToast('你点击了第 ' + res.index + ' 个菜单');
    });
  });
</script>

其他说明

  • 如果设置了 icon 那么每一个菜单项都要求有 icon,否则都没有 icon。
  • 针对原生 popMenuClick 事件,ap里只监听一次,防止多次回调,做了缓存。所以当单页应用多次调用ap.showPopMenu传入不同回调时,只有第一个回调生效。解决办法使用原生的的AlipayJSBridge.call或一个webview只调用一次ap.showPopMenu