效果图

代码

interface datas {
  name?: string,
  avatar?: string,
  level?: string,
  points?: number
}

interface products {
  id: number,
  name: string,
  price: number,
  image: string
}


@Entry({routeName:"MainPage"})
  @Component
  struct MainPage {
  @State upperLoading: boolean = true
  @State lowerLoading: boolean = true
  @State userData: datas = {}
  @State productList: products[] = []

  aboutToAppear() {
    // 模拟下部数据先加载
    setTimeout(() => {
      this.loadProductData()
    }, 1000)

    // 模拟上部数据后加载
    setTimeout(() => {
      this.loadUserData()
    }, 3000)
  }

  loadUserData() {
    // 模拟用户数据
    this.userData = {
      name: "张三",
      avatar: "https://p3.ssl.qhimgs1.com/t01203ad0638b57ce99.jpg",
      level: "黄金会员",
      points: 1250
    }
    this.upperLoading = false
  }

  loadProductData() {
    // 模拟产品数据
    this.productList = [
      {
        id: 1,
        name: "智能手表",
        price: 599,
        image: "https://p0.ssl.qhimgs1.com/t016c7aa3f98cd0e024.jpg"
      },
      {
        id: 2,
        name: "无线耳机",
        price: 299,
        image: "https://p0.ssl.qhimgs1.com/t016c7aa3f98cd0e024.jpg"
      },
      {
        id: 3,
        name: "蓝牙音箱",
        price: 199,
        image: "https://p0.ssl.qhimgs1.com/t016c7aa3f98cd0e024.jpg"
      }
    ]
    this.lowerLoading = false
  }

  build() {
    Column() {
      // 上部 - 用户信息区域
      Column() {
        if (this.upperLoading) {
          // 骨架图状态
          this.buildUpperSkeleton()
        } else {
          // 实际内容
          this.buildUserInfo()
        }
      }
      .width('100%')
      .padding(20)
      .borderRadius(12)
      .backgroundColor('#FFFFFF')
      .margin({ bottom: 20 })

      // 下部 - 产品列表区域
      Column() {
        if (this.lowerLoading) {
          // 骨架图状态
          this.buildLowerSkeleton()
        } else {
          // 实际内容
          this.buildProductList()
        }
      }
      .width('100%')
      .padding(20)
      .borderRadius(12)
      .backgroundColor('#FFFFFF')
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor('#F5F5F5')
  }

  @Builder
  buildUpperSkeleton() {
    Row() {
      // 头像骨架
      Column() {
        // 占位头像
      }
      .width(80)
      .height(80)
      .borderRadius(40)
      .backgroundColor('#E0E0E0')

      // 信息骨架
      Column() {
        // 名字骨架
        Column() {

        }
        .width('60%')
        .height(24)
        .margin({ bottom: 10 })
        .backgroundColor('#E0E0E0')

        // 等级骨架
        Column() {

        }
        .width('40%')
        .height(18)
        .margin({ bottom: 8 })
        .backgroundColor('#E0E0E0')

        // 积分骨架
        Column() {

        }
        .width('50%')
        .height(18)
        .backgroundColor('#E0E0E0')
      }
      .margin({ left: 20 })
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .justifyContent(FlexAlign.Start)
  }

  @Builder
  buildUserInfo() {
    Row() {
      Image(this.userData.avatar)
        .width(80)
        .height(80)
        .borderRadius(40)

      Column() {
        Text(this.userData.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .margin({ bottom: 5 })

        Text(this.userData.level)
          .fontSize(16)
          .fontColor('#666666')
          .margin({ bottom: 5 })

        Text(`积分: ${this.userData.points}`)
          .fontSize(16)
          .fontColor('#666666')
      }
      .margin({ left: 20 })
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .justifyContent(FlexAlign.Start)
  }

  @Builder
  buildLowerSkeleton() {
    Column() {
      // 标题骨架
      Column() {

      }
      .width('40%')
      .height(24)
      .margin({ bottom: 20 })
      .backgroundColor('#E0E0E0')

      // 产品列表骨架
      ForEach([1, 2, 3], () => {
        Row() {
          // 产品图片骨架
          Column() {

          }
          .width(80)
          .height(80)
          .margin({ right: 15 })
          .backgroundColor('#E0E0E0')

          // 产品信息骨架
          Column() {
            Column() {

            }
            .width('70%')
            .height(20)
            .margin({ bottom: 10 })
            .backgroundColor('#E0E0E0')

            Column() {

            }
            .width('40%')
            .height(16)
            .backgroundColor('#E0E0E0')
          }
          .alignItems(HorizontalAlign.Start)
        }
        .width('100%')
        .margin({ bottom: 15 })
        .justifyContent(FlexAlign.Start)
      })
    }
    .width('100%')
  }

  @Builder
  buildProductList() {
    Column() {
      Text('热门产品')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })

      ForEach(this.productList, (product: products) => {
        Row() {
          Image(product.image)
            .width(80)
            .height(80)
            .margin({ right: 15 })

          Column() {
            Text(product.name)
              .fontSize(18)
              .fontWeight(FontWeight.Medium)
              .margin({ bottom: 5 })

            Text(`¥${product.price}`)
              .fontSize(16)
              .fontColor('#FF6600')
          }
          .alignItems(HorizontalAlign.Start)
        }
        .width('100%')
        .margin({ bottom: 15 })
        .justifyContent(FlexAlign.Start)
      })
    }
    .width('100%')
  }
}