移动开发平台 mPaaS 隐藏加载中

By | 2021年4月23日

此接口用于隐藏全局加载框。

hideLoading 接口的使用方法

  
  1. AlipayJSBridge.call('hideLoading');

代码示例

显示/隐藏全局加载框:

  
  1. <h1>点击以下按钮看不同效果</h1>
  2. <p>注意安卓下显示 loading 后,会覆盖整个界面,所以请使用系统回退键关闭 loading</p>
  3. <button class="btn show">显示 loading</button>
  4. <button class="btn delay">延迟 2 秒显示 loading</button>
  5. <button class="btn notext">无文字菊花</button>
  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>

请关注公众号获取更多资料

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注