🎯 目标
构建一个通用 CommonLoading
组件,满足以下需求:
-
支持全屏蒙层加载,用于页面首次加载
-
支持嵌套式加载,用于组件或模块加载中状态
-
支持文案 / 动画图标自定义
-
可扩展支持圆圈旋转动画、Lottie 等表现形式
-
避免误触:全屏加载支持点击穿透控制
🧱 加载形式示意
[ 全屏 ]
╔════════════════════╗
║ ⏳ 加载中... ║
╚════════════════════╝
[ 内嵌 ]
列表加载中...
🔄 数据正在拉取
🧰 组件实现:CommonLoading.ets
@Component
export struct CommonLoading {
@Prop fullscreen: boolean = false
@Prop text: string = '加载中...'
@Prop transparent: boolean = false
@Prop spinning: boolean = true
build() {
if (this.fullscreen) {
Stack() {
// 蒙层背景
Blank()
.backgroundColor(this.transparent ? '#00000000' : '#00000040')
.height('100%')
Column({ space: 8 })
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.