HarmonyOS 鸿蒙Next 骨架屏

参考如下demo

@Extend(Column)
function commonStyle(width: string, color: Resource, opacity: number) {

  .width(width)

  .height('100%')

  .backgroundColor(color)

  .opacity(opacity)

  .borderRadius(2)

}

@Entry
@Component
export default struct YangTest1Page {
  @State arr: number[] = [];
  @State ColumnBgColor: Resource = $r('app.color.gray_C0C0C0') //C0C0C0
  @State ColumnOpacityCom: number = 0.5;
  @State ListOpacityCom: number = 0.5;
  @State listItemHeight: string = '20%'

  startAnimation() {

    animateTo({

      duration: 600, // 动画时长

      tempo: 0.6, // 播放速率

      curve: Curve.EaseInOut, // 动画曲线

      delay: 200, // 动画延迟

      iterations: -1, // 播放次数

      playMode: PlayMode.Alternate, // 动画模式

      onFinish: () => {

        console.info('play end')

      }

    }, () => {

      this.ListOpacityCom = 0.1;

    })

  }

  build() {

    Column() {

      List({ initialIndex: 0 }) {

        ForEach(this.arr, (item: number) => {

          ListItem() {

            Column() {

              Row() {

                Column().commonStyle('50%', this.ColumnBgColor, this.ColumnOpacityCom)

                Column().commonStyle('30%', this.ColumnBgColor, this.ColumnOpacityCom)

              }.justifyContent(FlexAlign.SpaceBetween).width('100%').height('25%')

              Blank().height('8%')

              Row() {

                Column().commonStyle('50%', this.ColumnBgColor, this.ColumnOpacityCom)

                Column().commonStyle('30%', this.ColumnBgColor, this.ColumnOpacityCom)

              }.justifyContent(FlexAlign.SpaceBetween).width('100%').height('10%')

              Blank().height('8%')

              Row() {

                Column().layoutWeight(1)

                Column().commonStyle('30%', this.ColumnBgColor, this.ColumnOpacityCom)

              }.justifyContent(FlexAlign.SpaceBetween).width('100%').height('10%')

              Blank().height('8%')

              Row()

                .height('12%')

                .backgroundColor(this.ColumnBgColor)

                .width('100%')

                .opacity(this.ColumnOpacityCom)

                .borderRadius(2)

            }.margin({ top: '4%', bottom: '2%' })

          }

          .width('90%')

          .height(this.listItemHeight)

        }, (item: number) => JSON.stringify(item))

      }
      .alignListItem(ListItemAlign.Center)

      .listDirection(Axis.Vertical) // 排列方向

      .divider({ strokeWidth: 1, color: $r('app.color.gray_F4F5F7') }) // 每行之间的分界线 F4F5F7

      .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果

      .onScrollIndex((firstIndex: number, lastIndex: number) => {

        console.info('first' + firstIndex)

        console.info('last' + lastIndex)

      })

      .scrollBar(BarState.Off)

      .opacity(this.ListOpacityCom)

      .width('100%')

      .onAppear(() => {

        this.startAnimation()

      })

    }.width('100%').height('100%').padding({ top: 5 })

    .onAreaChange((oldValue: Area, newValue: Area) => {

      const listHeight = Number(newValue.height)

      const length = Math.round(listHeight / 120)

      for (let i = 0; i < length; i++) {

        this.arr.push(i)

      }

      this.listItemHeight = Math.floor(100 / length) + '%'

    })

  }
}