uni.showLoading(options)

展示全部

# uni.showLoading(options) GitCode GitHub

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

它是一个悬浮弹出的、非组件内嵌的加载中提示。

# showLoading 兼容性

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

# 参数

名称

类型

必填

默认值

兼容性

描述

options

ShowLoadingOptions

是

uni.showLoading参数定义

名称

类型

必备

默认值

兼容性

描述

title

string

是

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

mask

boolean

否

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

success

(res: ShowLoadingSuccess) => void

否

uni.showLoading成功回调函数定义

fail

(res: ShowLoadingFail) => void

否

uni.showLoading失败回调函数定义

complete

(res: any) => void

否

uni.showLoading完成回调函数定义

# ShowLoadingFail 的属性值

名称

类型

必备

默认值

兼容性

描述

errCode

number

是

错误码

合法值

兼容性

描述

撤销

1001

请求参数非法

errSubject

string

是

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

data

any

否

错误信息中包含的数据

cause

Error

否

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

errMsg

string

是

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

示例

<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>
<script lang="uts">
  type ItemType = {
    value : string
    name : string
  }
  export default {
    data() {
      return {
        title: 'loading',
        items: [
          {
            value: 'null',
            name: '无标题',
          },
          {
            value: '三秒后自动关闭',
            name: '普通标题',
          },
          {
            value: '超长文本内容，测试超出范围-超长文本内容，测试超出范围-三秒后自动关闭',
            name: '长标题',
          },
        ] as ItemType[],
        current: 0,
        maskSelect: false,
        titleSelect: "null"
      }
    },
    onLoad() {
      uni.showLoading({
        title: 'onLoad 调用示例,2秒后消失'
      })
      setTimeout(function () {
        uni.hideLoading()
      }, 2000);
    },
    methods: {
      //自动化测试例专用
      jest_getWindowInfo() : GetWindowInfoResult {
        return uni.getWindowInfo();
      },

      radioChange(e : UniRadioGroupChangeEvent) {
        const selected = this.items.find((item) : boolean => {
          return item.value == e.detail.value
        })
        if (selected != null) {
          this.titleSelect = selected.value
        }
      },
      maskChange: function (e : UniSwitchChangeEvent) {
        this.maskSelect = e.detail.value
      },
      showLoading: function () {

        console.log(this.titleSelect)
        if (this.titleSelect == "null") {
          uni.showLoading({
            title: "",
            mask: this.maskSelect
          });
        } else {
          uni.showLoading({
            title: this.titleSelect,
            mask: this.maskSelect
          });
        }
        setTimeout(() => {
          this.hideLoading();
        }, 3000);
      },
      hideLoading: function () {
        uni.hideLoading();
      }
    }
  }
</script>

# 参见

# uni.hideLoading() GitCode GitHub

隐藏 loading 提示框。

# hideLoading 兼容性

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

# 参见

# 通用类型

# GeneralCallbackResult

名称

类型

必备

默认值

兼容性

描述

errMsg

string

是

错误信息

# Bug & Tips

在 Android、iOS、微信小程序、Web 平台，showLoading 是和页面（包括 dialogPage）绑定的。
- 当showLoading执行时，会寻找当前页面栈顶的窗体（包括 dialogPage），找到后进行绑定，然后弹出loading。
- 在弹出loading后，再次打开新页面，新页面会覆盖原页面弹出的 loading。
  - 如需在新页面（包括 dialogPage）弹出 loading，需要再次调用 showLoading
在 HarmonyOS 平台，showLoading 是和 App window 绑定的，目前未与页面关联，当打开新页面时，原页面弹出的 loading 不会被遮挡。
- 未来 harmonyOS 平台也会提供与页面绑定的 showLoading
在所有平台，当前页面（包括 dialogPage）关闭时，弹出的 loading 都会被自动取消
- 如需在dialogPage关闭后，仍然弹出 Loading，需要在关闭dialogPage后再次调用 showLoading