All Products
Search
Document Center

Mobile Platform as a Service:Set title bar color

Last Updated:Feb 07, 2021

This interface is used to display the loading box in the title bar.

Use showTitleLoading interface

  1. AlipayJSBridge.call('showTitleLoading');

Code sample

Show/hide global loading box:

  1. <h1>Click the buttons below to check the effects</h1>
  2. <a href="javascript:void(0)" class="btn show">Display loading</a>
  3. <a href="javascript:void(0)" class="btn hide">Hide loading</a>
  4. <script>
  5. function ready(callback) {
  6. // Call directly if JSBridge has been injected
  7. if (window.AlipayJSBridge) {
  8. callback && callback();
  9. } else {
  10. // Monitor the injected events if JSBridge hasn't been injected
  11. document.addEventListener('AlipayJSBridgeReady', callback, false);
  12. }
  13. }
  14. ready(function() {
  15. document.querySelector('.show').addEventListener('click', function() {
  16. AlipayJSBridge.call('showTitleLoading');
  17. });
  18. document.querySelector('.hide').addEventListener('click', function() {
  19. AlipayJSBridge.call('hideTitleLoading');
  20. });
  21. });
  22. </script>