骨架屏的封装与使用

 在用户打开一个APP时，总会因为网不好造成一种视觉上的不好的体验，这就需要我们去设计一个骨架屏，在APP打开时显示一个大概的框架，等数据请求成功之后，再加载页面，进行页面的数据渲染

一、骨架屏的封装

@Preview
@Component
struct Skeleton {
  @Prop
  showAvatar: boolean = true
  @Prop
  count: number = 3
  timer: number = -1
  @State
  currentColor: string = "#f3f4f5"

  aboutToAppear(): void {
    this.timer = setInterval(() => {
      if (this.currentColor === "#f3f4f5") {
        this.currentColor = "#f7f8f9"
      }else {
        this.currentColor = "#f3f4f5"
      }
    }, 100)
  }

  aboutToDisappear(): void {
    clearInterval(this.timer)
  }

  @Builder
  getSingleItem() {
    Column() {
      Row({ space: 10 }) {
        if (this.showAvatar) {
          Row()
            .width(40)
            .height(40)
            .borderRadius(20)
            .backgroundColor(this.currentColor)
        }
        Column({ space: 10 }) {
          Row()
            .width("30%")
            .height(26)
            .backgroundColor(this.currentColor)
          Row()
            .width("100%")
            .height(26)
            .backgroundColor(this.currentColor)
          Row()
            .width("100%")
            .height(26)
            .backgroundColor(this.currentColor)
          Row()
            .width("50%")
            .height(26)
            .backgroundColor(this.currentColor)
        }
        .layoutWeight(1)
        .alignItems(HorizontalAlign.Start)

      }
      .alignItems(VerticalAlign.Top)
      .width('100%')
    }
    .width('100%')

  }

  build() {
    Column({ space: 30 }) {
      ForEach(Array.from(Array(this.count)), () => {
        this.getSingleItem()
      })
    }
    .alignItems(HorizontalAlign.Start)
    .padding(20)
    .width('100%')
    .height('100%')
    .backgroundColor($r("app.color.white"))
  }
}
export default Skeleton

骨架屏的使用

if(this.isLoading) {
  Skeleton({ count : 1 })
}