Alipay JSSDK V3.1.1

ap.setNavigationBar(OPTION | title, CALLBACK)

设置导航栏标题及样式。可直接传入一个字符串作为 OPTION.title 参数。

OPTION 参数说明

名称类型必填描述
titleString导航栏标题
imageString图片链接地址,必须 https,请使用一张3x高清图,尺寸450*90。若设置了 image,则 title 参数失效
backgroundColorString导航栏背景色,支持16进制颜色值
borderBottomColorString导航栏底部边框颜色,支持16进制颜色值。若设置了 backgroundColor,borderBottomColor 会不生效,默认会和 backgroundColor 颜色一样。
resetBoolean是否重置导航栏为支付宝默认配色,默认 false。

CALLBACK 参数说明

设置后调用

代码示例

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

<button id="J_btn_title" class="btn btn-default">设置标题文字</button>
<button id="J_btn_image" class="btn btn-default">设置标题图片(url)</button>
<button id="J_btn_bgColor" class="btn btn-default">设置导航栏背景色</button>
<button id="J_btn_borderColor" class="btn btn-default">设置导航栏颜底边框色</button>
<button id="J_btn_reset" class="btn btn-default">重置导航栏样式</button>
<script>
  var btnTitle = document.querySelector('#J_btn_title');
  var btnImage = document.querySelector('#J_btn_image');
  var btnBgColor = document.querySelector('#J_btn_bgColor');
  var btnBorderColor = document.querySelector('#J_btn_borderColor');
  var btnReset = document.querySelector('#J_btn_reset');

  btnTitle.addEventListener('click', function(){
    ap.setNavigationBar('支付宝-AlipayJSAPI');
  });
  btnImage.addEventListener('click', function(){
    ap.setNavigationBar({
      image: 'https://zos.alipayobjects.com/rmsportal/jFCQxeOXeKTQUfhrQFOo.png'
    });
  });
  btnBgColor.addEventListener('click', function(){
    ap.setNavigationBar({
      title: '设置导航栏背景色',
      backgroundColor: '#ED4A4D'
    });
  });
  btnBorderColor.addEventListener('click', function(){
    ap.setNavigationBar({
      title: '设置导航栏底部边框色',
      borderBottomColor: '#108ee9'
    });
  });
  btnReset.addEventListener('click', function(){
    ap.setNavigationBar({
      title: '重置导航栏样式',
      reset: true
    });
  });
</script>