【HarmonyOS 5.0.0 或以上】构建加载指示器组件 Loading:支持全屏 / 内嵌 / 动画自定义样式

🎯 目标

构建一个通用 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.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值