HarmonyOS 搜索结果页中，在loading中需要加载骨架屏，咨询合理的高性能方案？

Question

如题：HarmonyOS 搜索结果页中，在loading中需要加载骨架屏，咨询合理的高性能方案？

Answer 1

可参考：

@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) + '%'
  })
 }
}