简体中文
简体中文
# uni.showLoading(options?)
显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。
它是一个悬浮弹出的、非组件内嵌的加载中提示。
# showLoading 兼容性
| Web | 微信小程序 | Android | iOS | iOS uni-app x UTS 插件 | HarmonyOS | HarmonyOS(Vapor) |
|---|---|---|---|---|---|---|
| 4.0 | 4.41 | 3.91 | 4.11 | 4.11 | 4.61 | 5.0 |
# 参数
| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 | ||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| options | ShowLoadingOptions | 否 | - | - | uni.showLoading参数定义 | ||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||
# ShowLoadingFail 的属性值
| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |
|---|---|---|---|---|---|
| errCode | number | 是 | - | - | uni.showLoading失败回调参数 |
| errSubject | string | 是 | - | - | 统一错误主题（模块）名称 |
| data | any | 否 | - | - | 错误信息中包含的数据 |
| cause | Error | 否 | - | - | 源错误信息，可以包含多个错误，详见SourceError |
| errMsg | string | 是 | - | - |
# 参见
- 相关 Bug
- 参见uni-app相关文档
- 微信小程序文档
- 支付宝小程序文档
- 百度小程序文档
- 抖音小程序文档
- 飞书小程序文档
- 钉钉小程序文档
- QQ小程序文档
- 快手小程序文档
- 京东小程序文档
- 华为快应用文档
- 360小程序文档
# uni.hideLoading(options?)
隐藏 loading 提示框。
# hideLoading 兼容性
| Web | 微信小程序 | Android | iOS | iOS uni-app x UTS 插件 | HarmonyOS | HarmonyOS(Vapor) |
|---|---|---|---|---|---|---|
| 4.0 | 4.41 | 3.91 | 4.11 | 4.11 | 4.61 | 5.0 |
# 参数
| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 | ||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| options | HideLoadingOptions | 否 | - | - | uni.showLoading参数定义 | ||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||
# HideLoadingFail 的属性值
| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |
|---|---|---|---|---|---|
| errCode | number | 是 | - | - | uni.showLoading失败回调参数 |
| errSubject | string | 是 | - | - | 统一错误主题（模块）名称 |
| data | any | 否 | - | - | 错误信息中包含的数据 |
| cause | Error | 否 | - | - | 源错误信息，可以包含多个错误，详见SourceError |
| errMsg | string | 是 | - | - |
# 参见
- 相关 Bug
- 参见uni-app相关文档
- 微信小程序文档
- 支付宝小程序文档
- 百度小程序文档
- 抖音小程序文档
- 飞书小程序文档
- 钉钉小程序文档
- QQ小程序文档
- 快手小程序文档
- 京东小程序文档
- 华为快应用文档
- 360小程序文档
# 示例
示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见
示例
<template>
<view>
<page-head :title="data.title"></page-head>
<view class="uni-list">
<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 data.items"
:key="item.value" :class="index < data.items.length - 1 ? 'uni-list-cell-line' : ''"
:value="item.value" :checked="index === data.current">
{{ item.name }}
</radio>
</radio-group>
</view>
</view>
<!-- <view class="uni-padding-wrap uni-common-mt" style="flex-direction: row; justify-content: space-between; align-items: center;">
<text class="uni-title-text"> iOS 雪花样式 </text>
<switch :checked="data.iosSpinner" @change="iosSpinnerChange" />
</view> -->
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button type="primary" @click="showLoading">显示 loading 提示框</button>
<button @click="hideLoading">隐藏 loading 提示框</button>
<text>为方便演示，loading弹出3秒后自动关闭</text>
</view>
</view>
<view class="uni-padding-wrap">
<text>{{data.callbackText}}</text>
<view class="uni-btn-v">
<button type="primary" @click="closeSomeLoading">关闭指定loading</button>
<button type="primary" @click="noParamLoading">无参数测试</button>
</view>
</view>
</view>
</template>
<script setup lang="uts">
type ItemType = {
value : string
name : string
}
type DataType = {
title : string;
items : ItemType[];
current : number;
callbackText : string[];
titleSelect : string;
iosSpinner : boolean;
}
const data = reactive({
title: 'loading',
items: [
{
value: 'null',
name: '无标题',
},
{
value: '三秒后自动关闭',
name: '普通标题',
},
{
value: '超长文本内容，测试超出范围-超长文本内容，测试超出范围-三秒后自动关闭',
name: '长标题',
},
],
callbackText: [] as Array<string>,
current: 0,
titleSelect: "null",
iosSpinner: true
} as DataType)
const jest_getWindowInfo = () : GetWindowInfoResult => {
return uni.getWindowInfo();
}
const radioChange = (e : UniRadioGroupChangeEvent) => {
const selected = data.items.find((item) : boolean => {
return item.value == e.detail.value
})
if (selected != null) {
data.titleSelect = selected.value
}
}
const iosSpinnerChange = (e : UniSwitchChangeEvent) => {
data.iosSpinner = e.detail.value
}
const hideLoading = () => {
uni.hideLoading();
}
const noParamLoading = () => {
uni.showLoading()
uni.showLoading({
success: function (showRet : ShowLoadingSuccess) {
data.callbackText.push("noParamLoading 1 success")
}
})
uni.showLoading({
complete: function (showRet : any) {
data.callbackText.push("noParamLoading 2 complete")
}
})
setTimeout(function () {
uni.hideLoading({
success: function (ret : HideLoadingSuccess) {
data.callbackText.push("hide loading success")
}
})
}, 2000)
}
/**
* 关闭指定loading
*/
const closeSomeLoading = () => {
const loading1 = uni.showLoading({
title: "第一个loading",
iosSpinner: data.iosSpinner,
success: function (res : ShowLoadingSuccess) {
data.callbackText.push("showLoading 1 success")
console.log("showLoading 1 success", res)
},
fail: function (res : ShowLoadingFail) {
data.callbackText.push("showLoading 1 fail")
console.log("showLoading 1 fail", res)
},
complete: function (res : any) {
data.callbackText.push("showLoading 1 complete")
console.log("showLoading 1 complete", res)
},
})
const loading2 = uni.showLoading({
title: "第二个loading",
iosSpinner: data.iosSpinner,
success: function (res : ShowLoadingSuccess) {
data.callbackText.push("showLoading 2 success")
console.log("showLoading 2 success", res)
},
fail: function (res : ShowLoadingFail) {
data.callbackText.push("showLoading 2 fail")
console.log("showLoading 2 fail", res)
},
complete: function (res : any) {
data.callbackText.push("showLoading 2 complete")
console.log("showLoading 2 complete", res)
},
})
setTimeout(function () {
uni.hideLoading({
loadingPage: loading2,
success: function (res : HideLoadingSuccess) {
data.callbackText.push("hideLoading 2 success")
console.log("hideLoading 2 success", res)
},
fail: function (res : HideLoadingFail) {
data.callbackText.push("hideLoading 2 fail")
console.log("hideLoading 2 fail", res)
},
complete: function (res : any) {
data.callbackText.push("hideLoading 2 complete")
console.log("hideLoading 2 complete", res)
},
})
}, 1000)
setTimeout(function () {
uni.hideLoading({
loadingPage: loading1,
success: function (res : HideLoadingSuccess) {
data.callbackText.push("hideLoading 1 success")
console.log("hideLoading 1 success", res)
},
fail: function (res : HideLoadingFail) {
data.callbackText.push("hideLoading 1 fail")
console.log("hideLoading 1 fail", res)
},
complete: function (res : any) {
data.callbackText.push("hideLoading 1 complete")
console.log("hideLoading 1 complete", res)
},
})
}, 3000)
}
const showLoading = () => {
console.log(data.titleSelect)
if (data.titleSelect == "null") {
uni.showLoading({
title: "",
iosSpinner: data.iosSpinner,
});
} else {
uni.showLoading({
title: data.titleSelect,
iosSpinner: data.iosSpinner,
});
}
setTimeout(() => {
hideLoading();
}, 3000);
}
onLoad(() => {
// uni.showLoading()
// setTimeout(() => {
// uni.hideLoading()
// }, 2000);
})
defineExpose({
data,
showLoading,
hideLoading,
closeSomeLoading,
noParamLoading,
})
</script>
# 通用类型
# GeneralCallbackResult
| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |
|---|---|---|---|---|---|
| errMsg | string | 是 | - | 错误信息 |
# Tips
- 关于uni.showLoading和loading组件的区别：
- showLoading是一个简易的API，使用简单。因为它悬浮在页面上方、让页面整体失去响应。主流的App较少使用这种方式。
- loading组件是内置组件，无需在页面显式引入，可以嵌入页面中、按钮中。
- 从HBuilderX 5.0+，在App和Web平台，showLoading统一成一套代码，使用dialogPage的页面中显示一个loading组件来实现。dialogPage是模态的，不支持点击空白消失，但支持back关闭。需要非模态的使用场景时，请在页面中直接使用loading组件。
- showLoading 是和页面（包括 dialogPage）绑定的。
- 当showLoading执行时，会寻找当前页面栈顶的窗体（包括 dialogPage），找到后进行绑定，然后弹出loading。
- 在弹出loading后，再次打开新页面，新页面会覆盖原页面弹出的 loading。
- 如需在新页面（包括 dialogPage）弹出 loading，需要再次调用 showLoading
- 在HBuilderX 5.0以前，HarmonyOS 平台，showLoading 是和 App window 绑定的，目前未与页面关联，当打开新页面时，原页面弹出的 loading 不会被遮挡。HBuilderX 5.0拉齐了实现，与上条策略一致。
- 当前页面（包括 dialogPage）关闭时，弹出的 loading 都会被自动取消
- 如需在dialogPage关闭后，仍然弹出 Loading，需要在关闭dialogPage后再次调用 showLoading
- 注意在支持 dialogPage 的平台（Web和App），uni.showModal、uni.showActionSheet 也是 dialogPage 实现的，此时 showLoading 会绑定到这些 dialogPage 上
