全部产品

显示加载中

更新时间:2020-04-13 16:05:36

此接口用于显示全局加载框。

showLoading 接口的使用方法

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

代码示例

显示/隐藏全局加载框:

  1. <h1>点击以下按钮看不同效果</h1>
  2. <p>注意安卓下显示 loading 后,会覆盖整个界面,所以请使用系统回退键关闭 loading</p>
  3. <a href="javascript:void(0)" class="btn show">显示 loading</a>
  4. <a href="javascript:void(0)" class="btn delay">延迟 2 秒显示 loading</a>
  5. <a href="javascript:void(0)" class="btn notext">无文字菊花</a>
  6. <script>
  7. function ready(callback) {
  8. // 如果 jsbridge 已经注入则直接调用
  9. if (window.AlipayJSBridge) {
  10. callback && callback();
  11. } else {
  12. // 如果没有注入则监听注入的事件
  13. document.addEventListener('AlipayJSBridgeReady', callback, false);
  14. }
  15. }
  16. ready(function() {
  17. document.querySelector('.show').addEventListener('click', function() {
  18. AlipayJSBridge.call('showLoading', {
  19. text: 'Loading',
  20. });
  21. setTimeout(function() {
  22. AlipayJSBridge.call('hideLoading');
  23. }, 3000);
  24. });
  25. document.querySelector('.delay').addEventListener('click', function() {
  26. AlipayJSBridge.call('showLoading', {
  27. text: 'Loading',
  28. delay: 2000,
  29. });
  30. setTimeout(function() {
  31. AlipayJSBridge.call('hideLoading');
  32. }, 5000);
  33. });
  34. document.querySelector('.notext').addEventListener('click', function() {
  35. AlipayJSBridge.call('showLoading', {
  36. text: ' ',
  37. });
  38. setTimeout(function() {
  39. AlipayJSBridge.call('hideLoading');
  40. }, 3000);
  41. });
  42. });
  43. </script>

API

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

入参

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

注意事项

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