uni-app如何实现自定义加载动画 uni-app使用CSS实现Loading-uni-app-PHP中文网

用CSS实现可复用Loading组件：定义@keyframes旋转动画，使用border-radius: 50%和border-top-color单独设色确保正圆与高亮，配合v-show控制显隐，避免v-if重置动画；统一动画时长0.6s，transform-origin居中防偏移，scale微缩防锯齿，并注意小程序仅支持小写动画名及scoped样式隔离问题。

uni-app如何实现自定义加载动画 uni-app使用css实现loading

uni-app里怎么用CSS写一个可复用的Loading组件

直接用CSS实现Loading，比引入第三方库更轻量、更可控，也避免了uni.showToast或uni.showLoading那种全局遮罩不可定制的问题。关键在于：用@keyframes定义旋转/缩放/呼吸等动画，再通过display或visibility控制显隐，而不是靠v-if频繁销毁重建——否则动画会重置。

常见错误是把animation写在子元素上却忘了加transform-origin，导致旋转中心偏移；或者用opacity: 0隐藏但没配pointer-events: none，结果点击穿透到下层。

推荐把Loading封装成独立.vue文件，通过props接收visible布尔值控制开关
动画时长统一设为0.6s，和uni-app原生showLoading的节奏一致，体验更连贯
用transform: scale(0.8)微缩图标，避免旋转时边缘锯齿（尤其在iOS Webview中）

旋转类Loading的CSS写法（兼容H5/小程序/App）

uni-app跨端时，animation在微信小程序里不支持transform: rotateZ()简写，必须写全rotate(360deg)；H5和App则没问题。最稳妥的写法是：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #e0e0e0;
  border-top-color: #007AFF;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

注意两点：一是border-radius: 50%必须显式声明，某些安卓WebView里默认不是正圆；二是border-top-color单独设色，比用border-color再覆盖更可靠。

如何让Loading跟随数据请求状态自动开关

别在每个uni.request前后手动调this.loading = true/false，容易漏掉catch分支。应该封装请求函数，统一处理：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

async apiGetUser() {
  uni.showLoading({ title: '加载中' }); // 可选：保留原生提示作兜底
  try {
    const res = await uni.request({ url: '/user' });
    this.userData = res.data;
  } catch (err) {
    console.error(err);
  } finally {
    uni.hideLoading();
  }
}

但如果要用自定义CSS Loading，就改用响应式变量：

在data里声明loading: false
在methods里封装requestWithLoading，内部自动设置this.loading = true → 请求 → this.loading = false
模板中用v-show="loading"而非v-if，保证DOM始终存在，动画不中断