更新记录

1.0.0（2026-03-18） 下载此版本

Added

• 初始版本发布
• 支持默认 SVG 加载动画
• 支持自定义加载图标
• 支持自定义尺寸和颜色
• 响应式设计，适配不同屏幕尺寸
• 支持 Vue 3 + TypeScript

Features

• 轻量级，无外部依赖
• 支持 H5、小程序、App 等所有 uni-app 支持的平台
• 简洁美观的加载效果
• 易于集成和使用

平台兼容性

uni-app(3.7.1)

uni-app x(3.7.3)

其他

open-loading

插件介绍

open-loading 是一个轻量级的加载动画组件，用于在 uni-app 项目中显示加载状态。它支持自定义图标、尺寸和颜色，提供了简洁美观的加载效果。

功能特性

• ✅ 支持自定义加载图标
• ✅ 可调整加载动画尺寸
• ✅ 可自定义加载动画颜色
• ✅ 响应式设计，适配不同屏幕尺寸
• ✅ 轻量级，无外部依赖
• ✅ 支持 Vue 3 + TypeScript

安装方法

方式一：通过 uni_modules 安装

在 HBuilderX 中，通过 插件市场 搜索 open-loading 并安装。

方式二：手动安装

将 open-loading 目录复制到项目的 uni_modules 目录中。

使用示例

基本用法

<template>
  <view class="container">
    <!-- 默认加载动画 -->
    <open-loading />
  </view>
</template>

<script setup>
import OpenLoading from '@/uni_modules/open-loading/components/open-loading/open-loading.vue';
</script>

自定义尺寸和颜色

<template>
  <view class="container">
    <!-- 自定义尺寸和颜色 -->
    <open-loading size="80rpx" color="#ff6b6b" />
  </view>
</template>

<script setup>
import OpenLoading from '@/uni_modules/open-loading/components/open-loading/open-loading.vue';
</script>

使用自定义图标

<template>
  <view class="container">
    <!-- 使用自定义图标 -->
    <open-loading 
      icon="https://example.com/loading.gif" 
      size="100rpx" 
    />
  </view>
</template>

<script setup>
import OpenLoading from '@/uni_modules/open-loading/components/open-loading/open-loading.vue';
</script>

API 文档

Props

示例

示例 1：默认加载动画

<open-loading />

示例 2：小型加载动画

<open-loading size="60rpx" />

示例 3：红色加载动画

<open-loading color="#ff4757" />

示例 4：自定义 GIF 图标

<open-loading icon="https://img.alicdn.com/imgextra/i4/O1CN01f8Z2sL1qZ8z7O8z7O_!!6000000005488-0-tps-200-200.gif" />

注意事项

1. 当使用 icon 属性时，color 属性将不起作用，因为自定义图标已经包含了自己的颜色。
2. 建议使用尺寸适中的图标，过大的图标可能会影响页面布局。
3. 自定义图标建议使用透明背景的 GIF 或 PNG 格式，以获得最佳视觉效果。
4. 在网络请求或数据加载时使用，提升用户体验。

兼容性

• 支持 H5、小程序、App 等所有 uni-app 支持的平台
• 支持 Vue 3 + TypeScript
• 兼容 uni-app 2.0+ 版本

示例场景

网络请求加载

<template>
  <view class="container">
    <button @click="fetchData">获取数据</button>
    <view v-if="loading" class="loading-container">
      <open-loading />
      <text>加载中...</text>
    </view>
    <view v-else>{{ data }}</view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import OpenLoading from '@/uni_modules/open-loading/components/open-loading/open-loading.vue';

const loading = ref(false);
const data = ref('');

const fetchData = async () => {
  loading.value = true;
  // 模拟网络请求
  setTimeout(() => {
    data.value = '获取到的数据';
    loading.value = false;
  }, 2000);
};
</script>

<style scoped>
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50rpx;
}

.loading-container text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #666;
}
</style>

页面初始化加载

<template>
  <view class="container">
    <view v-if="loading" class="loading-wrapper">
      <open-loading size="100rpx" color="#4ecdc4" />
    </view>
    <view v-else class="content">
      <!-- 页面内容 -->
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import OpenLoading from '@/uni_modules/open-loading/components/open-loading/open-loading.vue';

const loading = ref(true);

onMounted(() => {
  // 模拟页面初始化加载
  setTimeout(() => {
    loading.value = false;
  }, 1500);
});
</script>

<style scoped>
.loading-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 9999;
}
</style>

贡献

欢迎提交 Issue 和 Pull Request 来改进这个插件。

许可证

MIT License