鸿蒙 uni-app x loading 组件踩坑与暂停优化

鸿蒙专家

在 uni-app x 中，loading 是标准加载动画组件，常用于页面加载、数据请求、文件上传等场景。鸿蒙平台从 HarmonyOS 5.0 开始支持该组件，全平台也是 5.0 才支持，比其他基础组件晚。如果要兼容旧版本，需要自己用 CSS 动画实现。

一、组件能力与限制

loading 利用系统 GPU 加速渲染，官方说一个界面放 100 个同时转也不卡，原文作者实测确实如此。鸿蒙平台因 OS 渲染线程开放能力不足，loading 会受主线程轻微影响，但仍可做到一个界面 100 个 loading 同时转圈不卡顿。

组件属性较少，常用包括 bold 加粗、paused 暂停、ios-spinner 等。CSS 支持很有限，只支持 width、height、border-color、color 四个属性；margin、padding、background-color 不支持，CSS 变量也不支持。

二、常用实战写法

基础 loading 默认是 16px 大小、黑色线条、不停旋转：

2. <template>
3. <loading></loading>
4. </template>

复制代码

自定义大小和颜色：

2. <loading style="width: 40px; height: 40px; border-color: #2196F3;"></loading>
3. <loading style="width: 24px; height: 24px; border-color: #F44336;"></loading>
4. <loading style="width: 16px; height: 16px; border-color: #4CAF50;"></loading>

复制代码

加粗线条：

2. <loading bold style="width: 30px; height: 30px; border-color: #2196F3;"></loading>

复制代码

暂停动画和条件显示：

2. <loading paused style="width: 30px; height: 30px; border-color: #2196F3;"></loading>
3. <loading v-if="isLoading" style="width: 30px; height: 30px; border-color: #2196F3;"></loading>

复制代码

loading 加文字、页面加载状态、列表加载更多、按钮 loading、深色背景 loading 等场景，本质都是布局与状态控制。按钮中可放 16px loading，border-color 用 white，并配合 disabled 防止重复提交；列表底部用 isLoadingMore 控制，加载时显示 loading 和“加载中...”；整页加载可用 v-if 切换内容；深色背景用白色 loading。

三、鸿蒙平台适配要点

HarmonyOS 5.0 才开始支持 loading，旧版本需要 CSS 动画。鸿蒙原生开发中，加载动画使用 LoadingProgress 组件：

2. // 鸿蒙原生写法
3. LoadingProgress()
4. .width(40)
5. .height(40)
6. .color('#2196F3')

复制代码

对比来看，uni-app x 的 loading 用 CSS 控制样式，写法更灵活。

从 HBuilderX 5.0 开始，uni.showLoading API 在非小程序平台上通过 loading 组件实现。也就是说，调用 uni.showLoading() 底层其实就是渲染了一个 loading 组件。页面内某个区域在加载，用 loading 组件；整个页面在加载且需要遮罩，用 uni.showLoading。

四、踩坑记录

1. 鸿蒙 5.0 才支持。之前的版本需要自己用 CSS 动画实现。
2. 只支持很少的 CSS。loading 只支持 width、height、border-color、color 四个 CSS 属性，margin、padding、background-color 都不支持。
3. 不用时要暂停或隐藏。loading 默认旋转，如果不用了，应该用 paused 暂停或 v-if 隐藏。不要在隐藏或被遮挡的区域让 loading 持续旋转，浪费 GPU 资源。
4. ios-spinner 颜色优先级。当 ios-spinner=true 时，color 的优先级大于 border-color；当 ios-spinner=false 时，color 无效。大多数情况下用 border-color 就够了。
5. ios-spinner 大小限制。ios-spinner=true 时，由于 iOS 系统雪花非矢量，CSS width/height 超过 37px 会模糊。
6. 不支持 CSS 变量。不能用 var(--color) 这种方式设置颜色。
7. margin 需要外面套 view：

2. <!-- 错误：margin 不生效 -->
3. <loading style="margin: 10px;"></loading>
5. <!-- 正确：外面套 view -->
6. <view style="margin: 10px;">
7. <loading></loading>
8. </view>

复制代码

五、性能与动态控制

动态控制可以绑定 paused、bold、style。原文完整示例中，通过按钮切换暂停、加粗、放大、缩小、换色；换色时 currentColor 由 colors 数组和 colorIndex 计算，尺寸限制在 16 到 80px 之间。

2. <loading :paused="isPaused" :bold="isBold"
3. :style="{ width: size + 'px', height: size + 'px', borderColor: currentColor }"></loading>

复制代码

总结：loading 组件是 uni-app x 在鸿蒙平台显示加载动画的标准方案。关键点包括：全平台 5.0 才支持；利用 GPU 加速，鸿蒙平台受主线程轻微影响但 100 个同时转不卡；只支持 width、height、border-color、color 四个 CSS；paused 暂停动画，bold 加粗线条；不用时要暂停或隐藏；margin 不支持，需要外套 view；uni.showLoading 底层用的就是 loading 组件。