Q-loading组件：自定义加载组件，提升用户体验

前端

2022-12-24 08:51:24

Q-Loading 组件：提升 Web 应用用户体验

加载组件的意义

加载组件是用来在网页或应用程序中显示加载状态的。当用户执行操作时，加载组件会显示出来，向用户表明操作正在进行中。这有助于用户了解操作进度，从而减少等待时间带来的焦虑感。

Q-Loading 组件的优势

Q-Loading 组件是 Uniapp 中一个强大的加载组件，它具有以下优点：

多种效果： 提供多种效果，满足不同需求。
高度可配置： 可以根据需要进行配置，非常灵活。
使用简单： 代码简洁，开发效率高。

如何使用 Q-Loading 组件

准备工作： 在 components 目录下新建 q-loading 组件文件夹，创建 q-loading.vue 组件文件。
结构定义： 在 HTML 中使用 <template> 标签定义组件结构，包括 HTML 结构和样式。
逻辑控制： 在 <script> 中定义组件的方法和数据，控制组件的显示和隐藏。
效果预览： 在组件根元素上添加 class 属性，并设置其值，可以控制组件的效果。

代码示例

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

<script>
export default {
  props: {
    size: {
      type: Number,
      default: 40
    }
  }
};
</script>

<style>
.q-loading {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-icon {
  width: {{ size }}px;
  height: {{ size }}px;
  border: 2px solid #000;
  border-radius: 50%;
  animation: loading 1s infinite linear;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

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