uniapp loading动画

### 创建 Loading 动画

在 UniApp 中创建 loading 动画可以通过自定义组件来实现。通过引入特定的动画样式并利用 Vue 的响应式特性，可以轻松管理显示和隐藏状态。

#### 自定义加载中页面动画弹跳动画组件

首先，在 `components` 文件夹下新建一个名为 `mix-load.vue` 的文件用于封装加载动画逻辑：

<template>
  <view v-if="visible" class="load-container">
    <!-- 加载图标 -->
    <image src="/static/loading.gif"></image>
    <text>正在加载...</text>
  </view>
</template>

<script>
export default {
  name: 'MixLoad',
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    showAnimation() {
      this.visible = true;
    },
    hideAnimation() {
      this.visible = false;
    }
  }
};
</script>

<style scoped>
.load-container {
  position: fixed;
  top: var(--top, 0px); /* 使用 CSS 变量设置顶部距离 */
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, .5);
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 添加更多样式以美化加载效果 */
</style>

此代码片段展示了如何构建一个简单的全屏遮罩层加上 GIF 图片作为视觉反馈[^1]。

#### 在页面中使用 MixLoad 组件

接着，在想要应用这个功能的具体页面里注册上述组件，并调用其方法控制可见性：

import MixLoad from '@/components/mix-load';

export default {
  components: { MixLoad },
  mounted() {
    // 延迟模拟数据请求过程中的加载提示
    setTimeout(() => {
      this.$refs.mixLoad.showAnimation();
      
      // 模拟异步操作完成后的关闭动作
      setTimeout(() => {
        this.$refs.mixLoad.hideAnimation();
      }, 3000);
    }, 1000);
  }
}

为了调整加载框的位置，可以在父级元素上动态绑定内联样式传递给子组件内的 CSS 变量 `--top` 来改变默认值。

<mix-load :style="{ '--top': `${someTopValue}px` }" ref="mixLoad"/>

这样就完成了基于 UniApp 平台的一个简单而实用的加载指示器设计。