uni-app 之 uni.showLoading

uni.showLoading` 是 uni-app 中用于显示加载提示框的 API，常用于网络请求等异步操作期间向用户提供加载状态反馈。

基本用法

uni.showLoading({
  title: "加载中...",
});

参数说明

参数	类型	默认值	必填	说明
title	String	-	是	提示的内容
mask	Boolean	false	否	是否显示透明蒙层，防止触摸穿透
success	Function	-	否	接口调用成功的回调函数
fail	Function	-	否	接口调用失败的回调函数
complete	Function	-	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

基础用法

uni.showLoading({
  title: "加载中",
});

带遮罩层的加载提示

uni.showLoading({
  title: "加载中...",
  mask: true,
});

// 模拟异步操作
setTimeout(function () {
  uni.hideLoading();
}, 2000);

注意事项

1. uni.showLoading 和 uni.showToast 会共用一个弹窗，如果先后调用，后面的会覆盖前面的
2. 加载提示框不会自动关闭，必须手动调用 uni.hideLoading() 才能关闭
3. 调用 uni.hideLoading() 可以提前关闭加载提示框
4. 在 App 和 H5 端，当 mask 为 true 时，会阻止用户交互直到调用 uni.hideLoading()

相关 API

• uni.hideLoading(): 隐藏加载提示框
• uni.showToast(): 显示消息提示框
• uni.hideToast(): 隐藏消息提示框

完整示例

// 显示加载提示
uni.showLoading({
  title: "正在处理...",
  mask: true,
});

// 模拟异步请求
uni.request({
  url: "https://example.com/api/data",
  success: (res) => {
    // 处理响应数据
    console.log(res.data);
  },
  fail: (err) => {
    // 请求失败处理
    uni.showToast({
      title: "请求失败",
      icon: "none",
    });
  },
  complete: () => {
    // 隐藏加载提示
    uni.hideLoading();
  },
});