uniapp自定义加载动画

Uni-app中可以使用自定义组件来实现自定义加载动画。以下是一个简单的示例：

1. 首先在项目中创建一个自定义组件，例如 "loading.vue"。

2. 在该组件中添加一个动画，例如使用CSS3实现旋转动画。

3. 在组件的模板中添加以下代码，用于显示动画：

<template>
  <div class="loading">
    <div class="loading-icon"></div>
  </div>
</template>

4. 在组件的样式中添加以下代码，用于定义动画效果：

.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.loading-icon {
  width: 40px;
  height: 40px;
  border: 4px solid #fff;
  border-top-color: #3498db;
  border-radius: 50%;
  margin: auto;
  animation: loading 1s infinite linear;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

5. 在需要显示加载动画的页面中，使用该自定义组件即可。例如：

<template>
  <div>
    <loading v-show="isLoading"></loading>
    <!-- 页面内容 -->
  </div>
</template>

<script>
import Loading from '@/components/loading.vue'

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

通过以上步骤，就可以实现一个简单的自定义加载动画了。当需要显示加载动画时，将 isLoading 属性设为 true 即可；当加载完成后，将其设为 false，动画会自动消失。