uni.showLoading(options) @showloading

展示全部

# uni.showLoading(options)

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

# showLoading 兼容性

Web	微信小程序	Android	Android uni-app x UTS 插件	iOS	iOS uni-app x UTS 插件
4.0	4.41	3.91	3.91	4.11	4.11

# 参数

名称

类型

必填

默认值

兼容性

描述

options

ShowLoadingOptions

是

uni.showLoading参数定义

名称

类型

必备

默认值

兼容性

描述

title

string

是

提示的内容，长度与 icon 取值有关。

mask

boolean

否

是否显示透明蒙层，防止触摸穿透，默认：false

success

(res: ShowLoadingSuccess) => void

否

uni.showLoading成功回调函数定义

fail

(res: IPromptError) => void

否

uni.showLoading失败回调函数定义

complete

(res: any) => void

否

uni.showLoading完成回调函数定义

# IPromptError 的属性值

名称

类型

必备

默认值

兼容性

描述

errCode

number

是

错误码

合法值	兼容性	描述
1	-	撤销
1001	-	请求参数非法

errSubject

string

是

统一错误主题（模块）名称

data

any

否

错误信息中包含的数据

cause

Error

否

源错误信息，可以包含多个错误，详见SourceError

errMsg

string

是

# 示例

hello uni-app x

Template

Script

<template>
  <view>
    <page-head :title="title"></page-head>
    <view class="uni-list">
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">是否显示透明蒙层-屏蔽点击事件</view>
        <switch :checked="maskSelect" @change="maskChange" />
      </view>
      <view class="uni-padding-wrap">
        <view class="uni-title uni-common-mt">
          <text class="uni-title-text"> 设置标题 </text>
        </view>
      </view>
      <view class="uni-list uni-common-pl">
        <radio-group @change="radioChange">
          <radio class="uni-list-cell uni-list-cell-pd radio" v-for="(item, index) in items" :key="item.value"
            :class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value"
            :checked="index === current">
            {{ item.name }}
          </radio>
        </radio-group>
      </view>
    </view>
    <view class="uni-padding-wrap">
      <view class="uni-btn-v">
        <button class="uni-btn-v" type="primary" @click="showLoading">显示 loading 提示框</button>
        <button class="uni-btn-v" @click="hideLoading">隐藏 loading 提示框</button>
        <text>为方便演示，loading弹出3秒后自动关闭</text>
      </view>
    </view>
  </view>
</template>