全部產品
Search
文件中心

Mobile Platform as a Service:隱藏載入中

更新時間:Jul 24, 2024

此介面用於隱藏全域載入框。

hideLoading 介面的使用方法

AlipayJSBridge.call('hideLoading');

程式碼範例

顯示/隱藏全域載入框:

<h1>點擊以下按鈕看不同效果</h1>
<p>注意安卓下顯示 loading 後,會覆蓋整個介面,所以請使用系統回退鍵關閉 loading</p>
<button class="btn show">顯示 loading</button>
<button class="btn delay">延遲 2 秒顯示 loading</button>
<button class="btn notext">無文字菊花</button>

<script>
function ready(callback) {
  // 如果 jsbridge 已經注入則直接調用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果沒有注入則監聽注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function() {
  document.querySelector('.show').addEventListener('click', function() {
    AlipayJSBridge.call('showLoading', {
      text: 'Loading',
    });
    setTimeout(function() {
      AlipayJSBridge.call('hideLoading');
    }, 3000);
  });

  document.querySelector('.delay').addEventListener('click', function() {
    AlipayJSBridge.call('showLoading', {
      text: 'Loading',
      delay: 2000,
    });
    setTimeout(function() {
      AlipayJSBridge.call('hideLoading');
    }, 5000);
  });

  document.querySelector('.notext').addEventListener('click', function() {
    AlipayJSBridge.call('showLoading', {
      text: ' ',
    });
    setTimeout(function() {
      AlipayJSBridge.call('hideLoading');
    }, 3000);
  });
});
</script>