全部產品
Search
文件中心

Mobile Platform as a Service:設定導覽列背景色

更新時間:Jul 24, 2024

此介面用於設定 TitleBar 的顏色。

setTitleColor 介面的使用方法

AlipayJSBridge.call("setTitleColor", {
  color: 16775138,
  reset: false //(可選,預設為 false) 是否重設 title 顏色為預設顏色。
});
說明

使用 setTitleColor 介面時,需要在啟動頁面前配置參數 H5Param.LONG_TRANSPARENT_TITLE 為 always 或者 auto。樣本如下:param.putString(H5Param.LONG_TRANSPARENT_TITLE,"auto");

程式碼範例

<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)

入參

屬性

類型

描述

必填

預設值

color

int

色值,十進位。

Y

-