文档

显示加载中

更新时间:

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

showLoading 接口的使用方法

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

代码示例

显示/隐藏全局加载框:

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

注意

  • Android 下显示 loading 后,会覆盖整个界面,所以请使用系统回退键关闭 loading。

  • iOS 下的情况是,当没有设置 text 值的时候,只有标题栏和工具栏可以被点击,有文字的时候不能覆盖任何内容。9.9.5 版本以后已修复。

  • showLoading 是 webview 级别的,因此在 pushwindow 后的 webview 上调用 hideLoading 无法关掉上个 webview 的 loading,需要保证 showLoadinghideLoading 在一个 webview 环境内执行。

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

入参

属性

类型

描述

必填

默认值

text

string

文本内容,如需设为无文案,需传入一个空格。

N

“加载中”

delay

int

延迟多少毫秒后显示,如果在此时间之前调用了 hideLoading,则不会再显示。

N

0

autoHide

bool

默认情况下容器会在 pageFinish 后主动隐藏加载框,默认为 true,传入 false,关掉自动隐藏(仅限 Android 系统)。

N

true

cancelable

bool

安卓返回键是否消掉加载框,默认物理返回键会消掉加载框(仅限 Android 系统)。

N

true

  • 本页导读 (0)
文档反馈