首屏骨架效果HarmonyOS NEXT（适用API12以上版本）

原创已于 2025-03-25 09:42:14 修改 · 224 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #开发语言 #鸿蒙 #华为

于 2025-03-18 21:53:16 首次发布

HarmonyOS NEXT

首屏骨架效果

第一步：小组件样式（默认宽100%）

@Component
export struct HcSkeletonItem {
  @Prop
  widthValue: Length = '100%'

  build() {
    Text()
      .height(16)
      .width(this.widthValue)
      .borderRadius(2)
      .backgroundColor($r('app.color.common_gray_bg'))
  }
}

第二步：容器动画组件

@Component
export  struct HcSkeleton {

  // 做动画过渡的
  @State opacityValue: number = 1

  @Builder
  DefaultBuilder(){}

  @BuilderParam
  default: ()=>void = this.DefaultBuilder

  build() {
    Row(){
      this.default()
    }
    .padding(15)
    .opacity(this.opacityValue)
    .animation({
      duration: 600,
      iterations: -1,
      playMode: PlayMode.Alternate
    })
    .onAppear(()=>{
      this.opacityValue = 0.5
    })
  }
}

第四步：在页面内直接写样式

往HcSkeleton定义的组件里面传，后面正常写Colimn的样式


//判断是否在加载
  @State isLoading: boolean = false

//第三步：当请求数据前false，请求完true
  async getQuestionTypeList() {
    try {
      this.isLoading = true
      const res = await http.request<QuestionType[]>({
        url: 'question/type'
      })
      this.questionTypeList = res
      this.isLoading = false
    } catch (e) {
      logger.error(JSON.stringify(e))
    }
  }

--------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------

//骨架框
  @Builder
  SkeletonBuilder() {
    //第四步往HcSkeleton定义的组件里面传，后面正常写Colimn的样式
    HcSkeleton() {
      Column() {
        Row({ space: 16 }) {
          HcSkeletonItem({ widthValue: 60 })
          HcSkeletonItem({ widthValue: 100 })
          HcSkeletonItem({ widthValue: 80 })
          HcSkeletonItem({ widthValue: 40 })
        }
        .height(44)
        .width('100%')

        ForEach([1, 2, 3, 4, 5, 6], () => {
          Column({ space: 10 }) {
            HcSkeletonItem({ widthValue: '90%' })
            HcSkeletonItem({ widthValue: '45%' })
          }
          .height(80)
          .width('100%')
          .alignItems(HorizontalAlign.Start)
          .justifyContent(FlexAlign.Center)
        })
      }
      .padding({ left: 16, right: 16 })
    }
  }

-------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------
 build() {
   //第五步：加个判断，没加载成功显示骨架，成功了显示请求回数据的样式
    if (this.isLoading) {
      this.SkeletonBuilder()
    } else {
      //这里面是之前样式
    }