深入理解 uni-app 中的加载提示：uni.showLoading

在移动应用开发中，为了提升用户体验，经常需要在进行一些耗时操作或者异步请求时给用户一个提示，让用户知道当前操作正在进行中。在 uni-app 中，我们可以使用 uni.showLoading API 来显示加载提示框。这篇博文将深入介绍 uni.showLoading 的使用方法以及一些注意事项。

uni.showLoading 的基本使用

uni.showLoading 用于显示加载提示框，它接受一个配置对象作为参数，配置对象中包含了加载框的标题和一些其他选项。

uni.showLoading({
  title: '加载中...',
  mask: true, // 是否显示透明蒙层，防止触摸穿透
});

在上述示例中，我们使用 uni.showLoading 显示一个加载框，标题为“加载中...”并且设置了透明蒙层，以防止用户触摸穿透。

参数说明

• title (String，必填)：加载框标题。
• mask (Boolean，可选)：是否显示透明蒙层，防止触摸穿透。默认值为 true。

实际应用场景

下面是一个实际应用场景的示例，通过模拟异步请求，在数据加载的同时显示加载提示框，并在数据加载完成后隐藏加载提示框。

export default {
  methods: {
    fetchData() {
      uni.showLoading({
        title: '加载中...',
        mask: true,
      });
 
      // 模拟异步请求
      setTimeout(() => {
        // 数据请求完成后隐藏加载框
        uni.hideLoading();
      }, 2000);
    },
  },
};

在这个示例中，fetchData 方法通过 uni.showLoading 显示加载提示框，然后通过 setTimeout 模拟了一个异步请求，2秒后通过 uni.hideLoading 隐藏加载提示框，表示数据加载完成。

注意事项

• 在进行耗时操作、异步请求等需要等待的场景，使用 uni.showLoading 提示用户操作正在进行中。
• 在相应的时机使用 uni.hideLoading 隐藏加载提示框，确保提示框不会一直显示。

通过合理使用 uni.showLoading，我们可以在用户进行一些耗时操作时，为用户提供良好的提示，增强应用的用户体验。在实际开发中，根据具体场景和需求，可以灵活使用加载提示框。