• 下载
  • 社区

my.showLoading

显示加载提示的过渡效果,可与 my.hideLoading 配合使用。


扫码体验


my.showLoading.png


效果示例

3.png


示例代码

// API-DEMO page/API/loading/loading.json
{
    "defaultTitle": "加载提示"
}


<!-- API-DEMO page/API/loading/loading.axml-->
<view class="page">
  <view class="page-section">
    <view class="page-section-title">
      显示 loading 后,会覆盖整个h5页面,页面元素不能交互。
    </view>
    <view class="page-section-btns">
      <view onTap="showLoading">显示加载提示</view>
    </view>
  </view>
</view>


// API-DEMO page/API/loading/loading.js
Page({
  showLoading() {
    my.showLoading({
      content: '加载中...',
      delay: '1000',
    });
    setTimeout(() => {
      my.hideLoading();
    }, 5000);
  },
});


/* API-DEMO page/API/loading/loading.acss */
.tips{
  margin-left: 10px;
  margin-top: 20px; 
  color: red;
  font-size: 12px;
}
.tips .item {
  margin: 5px 0;
  color: #888888;
  line-height: 14px;
}


入参

Object 类型,属性如下:

属性

类型

必填

描述

content

String

提示中的文字内容。

delay

Number

延迟显示,单位 ms,默认 0。如果在此时间之前调用了 my.hideLoading 则不会显示。

success

Function

调用成功的回调函数。

fail

Function

调用失败的回调函数。

complete

Function

调用结束的回调函数(调用成功、失败都会执行)。