showLoading 显示加载中

优质

小牛编辑

131浏览

2023-12-01

Since 8.0

showLoading

显示全局大菊花

使用方法

AlipayJSBridge.call('showLoading', {
  text: '加载中',
});

代码演示

显示/隐藏全局loading框

<h1>点击以下按钮看不同效果</h1>
<p>注意安卓下显示loading后，会覆盖整个界面，所以请使用系统回退键关闭loading</p>
<a href="javascript:void(0)" class="btn show">显示loading</a>
<a href="javascript:void(0)" class="btn delay">延迟2秒显示loading</a>
<a href="javascript:void(0)" class="btn notext">无文字菊花</a>

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

查看演示扫码查看用支付宝扫码运行

API

AlipayJSBridge.call('showLoading',{
  text, delay
})

入参

名称	类型	描述	必选	默认值	版本
text	string	文本内容；如需设为无文案，需传入一个空格	N	‘加载中’
delay	int	延迟多少毫秒后显示；如果在此时间之前调用了hideLoading, 则不会再显示	N	0
autoHide	bool	默认情况下容器会在pageFinish的后会主动隐藏菊花，默认true, 传入false，关掉自动隐藏(only android)	N	true	10.0.15
cancelable	bool	安卓返回键是否消掉菊花，默认物理返回键会消掉菊花(only android)	N	true	10.0.18

使用注意

注意安卓下显示loading后，会覆盖整个界面，所以请使用系统回退键关闭loading;
ios下的情况是，当没有设置text值的时候，只有标题栏和工具栏可以被点击，有文字的时候不能覆盖任何内容。9.9.5以后已修复
showLoading 是webview级别的，因此在pushwindow后的webview上调用hideLoading是关不掉上个webview的loading，需要保证showLoading和hideLoading在一个webview环境内执行。