ap.setOptionButton 设置导航栏右侧按钮

优质

小牛编辑

127浏览

2023-12-01

ap.setOptionButton(OPTION | items, CALLBACK)

设置导航栏右侧按钮。

OPTION 参数说明

名称	类型	必填	描述
onClick	Function	否	监听 optionButton 点击事件
reset	Boolean	否	重置到系统默认按钮，默认为 false。当为 true 时，忽略其他参数
preventDefault	Boolean	否	是否阻止默认的分享功能，指定 iconType 的情况下点击时，会弹分享面板，`preventDefault: true` 会阻止默认分享面板弹出
items	Object Array	否	按钮数组，数组中每个项是一个对象。item 的具体配置字段见下表

items 配置项参数说明：

名称	类型	必填	描述
title	String	3选1	按钮标题，与 type、icon 三选一。
color	String	否	按钮标题文字颜色，与 title、type 三选一。
icon	String	3选1	按钮图标，支持 base64
type	String	3选1	按钮图标类型，与 title、icon 三选一。支持 user / filter / search / add / settings / scan / info / help / locate / more
badge	String Number	否	按钮红色气泡，默认 -1。其中 0 表示小红点，-1 表示不显示，其他值展示出来

onClick 返回值说明：
点击按钮时调用

名称	类型	描述
index	Number	被点击的菜单项的索引，从0开始，从左到右

代码示例

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

<button class="btn btn-default">设置文字「完成」</button>
<button class="btn btn-default">设置文字「颜色」</button>
<button class="btn btn-default">设置内置类型图标</button>
<button class="btn btn-default">设置自定义图标</button>
<button class="btn btn-default">重置</button>
<script>
  var btnTitle = document.querySelector('#J_btn_title');
  var btnColor = document.querySelector('#J_btn_color');
  var btnIcon = document.querySelector('#J_btn_icon');
  var btnType = document.querySelector('#J_btn_type');
  var btnReset = document.querySelector('#J_btn_reset');

  btnTitle.addEventListener('click', function(){
    ap.setOptionButton({
      items: [{
        title: '完成'
      }],
      onClick: function(data){
        ap.alert('你点击了「完成」，它是第' + data.index + '个 optionButton');
      },
      success: function(res) {
        ap.showToast('设置成功');
      },
      fail: function(res) {
        ap.showToast('设置失败');
      }
    });
  });
  btnColor.addEventListener('click', function(){
    ap.setOptionButton({
      items: [{
        title: '颜色',
        color: '#ED4A4D'
      }],
      onClick: function(data){
        ap.alert('你点击了「颜色」，它是第' + data.index + '个 optionButton');
      },
      success: function(res) {
        ap.showToast('设置成功');
      },
      fail: function(res) {
        ap.showToast('设置失败');
      }
    });
  });

  btnType.addEventListener('click', function(){
    var items = [
      {
        type: 'user'  
      },
      {
        type: 'settings'  
      }
    ];
    ap.setOptionButton({
      items: items,
      onClick: function(data){
        ap.alert('你点击了 ' + items[data.index].type);
      },
      success: function(res){
        ap.showToast('设置成功');
      },
      fail: function(res){
        ap.showToast('设置失败');
      }
    });
  });

  btnReset.addEventListener('click', function(){
    ap.setOptionButton({reset: true});
  });

  btnIcon.addEventListener('click', function(){
    ap.setOptionButton({
      items: [
        {
          icon: 'https://zos.alipayobjects.com/rmsportal/QJeWMNUFFiDCQawMLPTr.png',
          badge: 0
        },
        {
          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='
        }
      ],
      onClick: function(data){
        ap.showToast('你点击了第 ' + data.index + ' 个 optionButton');
      },
      success: function(res){
        ap.showToast('设置成功');
      },
      fail: function(res){
        ap.showToast('设置失败');
      }
    });
  });
</script>