uniapp开发4--实现耗时操作的加载动画效果

news2025/5/14 13:25:02

下面是使用 Vue 组件的方式，在 uni-app 中封装耗时操作的加载动画效果及全屏遮罩层的组件的示例。

组件结构：

components/loading.vue: 组件文件，包含 HTML 结构、样式和 JS 逻辑。

代码：

<template>
  <view class="loading-overlay" v-if="visible">
    <view class="loading-content">
      <view class="spinner"></view>
      <text class="loading-text">{{ text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Loading',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: '加载中...'
    }
  },
  data () {
    return {}
  },
  methods: {
    close () {
      this.$emit('update:visible', false)  // 用于双向绑定 visible
    }
  }
}
</script>

<style scoped>
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 10px;
}

.loading-text {
  font-size: 14px;
  color: #666;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

使用组件：

在页面中引入组件：

<template>
  <view>
    <button @click="startLoading">开始加载</button>

    <!--  引入并使用 loading 组件 -->
    <loading :visible.sync="isLoading" text="正在登录..."></loading>
  </view>
</template>

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

export default {
  components: {
    Loading
  },
  data () {
    return {
      isLoading: false, // 控制 loading 组件是否显示
    }
  },
  methods: {
    startLoading () {
      this.isLoading = true;

      // 模拟登录或请求
      setTimeout(() => {
        this.isLoading = false; // 停止加载
      }, 3000); // 3 秒后停止
    },
  }
}
</script>

要点解释：

visible Prop： 控制组件的显示/隐藏。父组件可以双向绑定这个 prop，以便在需要的时候手动关闭加载组件。(使用了.sync修饰符，需要发出 update:visible事件)
text Prop： 允许传递自定义的加载文字。
loading-overlay： 全屏遮罩层，设置了 position: fixed 和较高的 z-index，盖住页面所有内容。背景颜色使用了半透明 (rgba)，让背景透出一点。
spinner： 转圈的 CSS 动画。
close() 方法： 组件内部可以通过调用此方法来关闭自身，并通过 emit 触发 update:visible 事件。
使用双向绑定： 使用 :visible.sync="isLoading" 可以让父组件的 isLoading 和子组件的 visible 双向绑定。意味着父组件可以控制子组件的显隐，同时子组件也可以将自己的显隐状态同步给父组件。