setTitleColor 设置标题颜色

优质
小牛编辑
120浏览
2023-12-01
Since 8.0

setTitleColor

可通过接口调用,改变TitleBar的颜色

使用方法

AlipayJSBridge.call("setTitleColor", {
  color: 16775138,
  reset: false //(可选,默认为false)  是否重置title颜色为默认颜色。
});

代码演示

<div style="padding-top:80px;">
  <a href="javascript:void(0)" class="btn title">设置标题颜色</a>
  <a href="javascript:void(0)" class="btn reset">重置标题颜色</a>
  <a href="javascript:void(0)" class="btn pushWindow">新开查看透明标题重置效果</a>
  <a href="javascript:void(0)" class="btn resetTransparent">重置为白色透明标题</a>
</div>

<script>
function ready(callback) {
  // 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function(){
  document.querySelector('.title').addEventListener('click', function() {
    AlipayJSBridge.call("setTitleColor", {
      color: parseInt('108ee9', 16),
      reset: false // (可选,默认为false)  是否重置title颜色为默认颜色。
    });
  });

  document.querySelector('.reset').addEventListener('click', function() {
    AlipayJSBridge.call("setTitleColor",{
      color: 16775138,
      reset: true
    });
  });

  document.querySelector('.pushWindow').addEventListener('click', function() {
    AlipayJSBridge.call("pushWindow", {
      url: location.pathname + '?__webview_options__=transparentTitle%3Dalways'
    });
  });

  document.querySelector('.resetTransparent').addEventListener('click', function() {
    AlipayJSBridge.call("setTitleColor", {
      color: 16775138,
      resetTransparent: true
    });
  });
});
</script>
查看演示 扫码查看 用支付宝扫码运行

API

AlipayJSBridge.call('setTitleColor', {
  color: 16775138,
  reset: false,
  resetTransparent: false
}, fn)

入参

名称类型描述必选默认值版本
colorint色值,十进制Y
resetbool是否重置为支付宝默认颜色Nfalse
resetTransparentbool如果当前是透明的导航头,重置为默认的白色Nfalse

注:iOS 10.1.38以上兼容“resetTransParent”和“resetTransparent”两种写法。对前端业务不造成影响,开发时请以resetTransparent为准。