uniapp 首页加载时出现加载动画

uniApp是一个基于Vue.js的跨平台框架，用于构建统一的用户界面应用程序，可以在iOS、Android、Web等平台上运行。当uniApp应用启动时，首页加载通常会有一个加载动画的设计，这是为了提升用户体验，表明页面正在初始化。

在uniApp中，设置加载动画的一般步骤包括以下几个部分：

1. **创建动画组件**：可以使用uni-app内置的`LoadingIndicator`组件，或者自定义一个UI动画，如`<van-loading>`来自vant UI库。

<!-- 使用uni-app内置 -->
<template>
  <view v-if="isLoading">
    <loading-indicator size="large"></loading-indicator>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
    };
  },
  //...
}
</script>

2. **控制加载状态**：在组件的生命周期钩子（例如`created()`或`asyncData()`）里，你可以设置初始数据加载完成的条件，当数据准备好后将`isLoading`设为`false`，关闭加载动画。

// 示例中假设异步获取数据
async asyncData() {
  const response = await fetch('your-api-url');
  if (response.ok) {
    this.data = response.json();
    this.isLoading = false; // 加载完成后关闭动画
  } else {
    this.$error(response.statusText);
  }
}

3. **样式优化**：为了让动画看起来更吸引人，可以调整加载动画的颜色、大小、位置以及过渡效果。