设置导航栏标题及样式。可直接传入一个字符串作为 OPTION.title 参数。
| 名称 | 类型 | 必填 | 描述 |
|---|---|---|---|
| title | String | 否 | 导航栏标题 |
| image | String | 否 | 图片链接地址，必须 https，请使用一张3x高清图，尺寸450*90。若设置了 image，则 title 参数失效 |
| backgroundColor | String | 否 | 导航栏背景色，支持16进制颜色值 |
| borderBottomColor | String | 否 | 导航栏底部边框颜色，支持16进制颜色值。若设置了 backgroundColor，borderBottomColor 会不生效，默认会和 backgroundColor 颜色一样。 |
| reset | Boolean | 否 | 是否重置导航栏为支付宝默认配色，默认 false。 |
设置后调用
<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>