hideLoading 隐藏加载中

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

hideLoading

隐藏全局大菊花

使用方法

AlipayJSBridge.call('hideLoading');

代码演示

显示/隐藏全局loading框

<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>
查看演示 扫码查看 用支付宝扫码运行