JSAPI

  • 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
    })
    

    入参

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

    使用注意

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