全部产品
云市场
云游戏

设置导航栏背景色

更新时间:2020-04-13 16:05:21

此接口用于设置 TitleBar 的颜色。

setTitleColor 接口的使用方法

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

代码示例

  1. <div style="padding-top:80px;">
  2. <a href="javascript:void(0)" class="btn title">设置导航栏背景色</a>
  3. <a href="javascript:void(0)" class="btn reset">重置导航栏背景色</a>
  4. <a href="javascript:void(0)" class="btn pushWindow">新开一个透明导航栏的窗口</a>
  5. <a href="javascript:void(0)" class="btn resetTransparent">重置为透明导航栏</a>
  6. </div>
  7. <script>
  8. function ready(callback) {
  9. // 如果 jsbridge 已经注入则直接调用
  10. if (window.AlipayJSBridge) {
  11. callback && callback();
  12. } else {
  13. // 如果没有注入则监听注入的事件
  14. document.addEventListener('AlipayJSBridgeReady', callback, false);
  15. }
  16. }
  17. ready(function(){
  18. document.querySelector('.title').addEventListener('click', function() {
  19. AlipayJSBridge.call("setTitleColor", {
  20. color: parseInt('108ee9', 16),
  21. reset: false // (可选,默认为 false) 是否重置 title 颜色为默认颜色。
  22. });
  23. });
  24. document.querySelector('.reset').addEventListener('click', function() {
  25. AlipayJSBridge.call("setTitleColor",{
  26. color: 16775138,
  27. reset: true
  28. });
  29. });
  30. document.querySelector('.pushWindow').addEventListener('click', function() {
  31. AlipayJSBridge.call("pushWindow", {
  32. url: location.pathname + '?__webview_options__=transparentTitle%3Dalways'
  33. });
  34. });
  35. document.querySelector('.resetTransparent').addEventListener('click', function() {
  36. AlipayJSBridge.call("setTitleColor", {
  37. color: 16775138,
  38. resetTransparent: true
  39. });
  40. });
  41. });
  42. </script>

API

  1. AlipayJSBridge.call('setTitleColor', {
  2. color: 16775138,
  3. reset: false,
  4. resetTransparent: false
  5. }, fn)

入参

名称 类型 描述 必选 默认值
color int 色值,十进制 Y -